CSS: como obter barras de rolagem para div dentro do contêiner de altura fixa

92

Eu tenho a seguinte marcação:

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

O CSS se parece com isto:

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
}
.Content
{
  ???
}

Devido ao seu conteúdo, a altura de div.Contentnormalmente é maior do que o espaço fornecido por div.FixedHeightContainer. No momento, div.Contentse estende alegremente para fora do fundo dodiv.FixedHeightContainer - de forma alguma o que eu quero.

Como eu especifico isso div.Content obtém barras de rolagem (de preferência apenas na vertical, mas não sou muito exigente) quando sua altura é muito grande para caber?

overflow:autoe não overflow:scrollestão fazendo nada, por algum motivo bizarro.

css scrollbar overflow

— David
fonte

154

definir o overflowdeve cuidar disso, mas você precisa definir a altura doContent também. Se o atributo de altura não for definido, o div crescerá verticalmente com a altura necessária e as barras de rolagem não serão necessárias.

Veja o exemplo: http://jsfiddle.net/ftkbL/1/

— Dutchie432
fonte

Ok - obrigado. Portanto, preciso especificar uma altura para div.Content? Presumi que iria funcionar no contêiner que não caberia e apliquei as barras de rolagem com base nisso.

— David

6

Se você der Contentuma altura fixa, você não deve dar FixedHeightContaineruma altura fixa, porque você não pode saber a altura do seu título, então Contentpode ser empurrado para fora. Veja: jsfiddle.net/ftkbL/2 Você deve definir a altura fixa apenas no elemento com overflow: scroll. Consulte jsfiddle.net/ftkbL/3 ou jsfiddle.net/ftkbL/4

— RoToRa

Eu vejo seu ponto (do primeiro link), mas o texto do título é conhecido e é muito curto para quebrar em uma linha, a menos que o usuário aumente o texto para um tamanho impraticável.

— David

Existe uma maneira de ter uma altura curta e ocultar a barra de rolagem ao mesmo tempo? desta forma, quando os usuários arrastam para baixo em dispositivos móveis, eles verão que estão rolando para baixo, mas sem o incômodo de ver 2 barras de rolagem em seu navegador.

— klewis

@blackhawk - Que eu saiba, não. Pode ser necessário usar Javascript para isso. Especificamente, estou pensando na biblioteca jQuery Draggable: jqueryui.com/draggable -uma coisa a se considerar ... como os usuários de desktop saberão rolar?

— Dutchie432

2

FWIW, aqui está minha abordagem = uma abordagem simples que funciona para mim:

<div id="outerDivWrapper">
   <div id="outerDiv">
      <div id="scrollableContent">
blah blah blah
      </div>
   </div>
</div>

html, body {
   height: 100%;
   margin: 0em;
}

#outerDivWrapper, #outerDiv {
   height: 100%;
   margin: 0em;
}

#scrollableContent {
   height: 100%;
   margin: 0em;
   overflow-y: auto;
}

— Amor joão
fonte

1

Código da resposta acima por Dutchie432

.FixedHeightContainer {
    float:right;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#f00;
}

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}

— Charitha Goonewardena
fonte

-2

usar overflowpropriedade

overflow: hidden; 

overflow: auto;

overflow: scroll;

— bisma
fonte