CSS: cómo obtener barras de desplazamiento para div dentro del contenedor de altura fija

92

Tengo el siguiente marcado:

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

El CSS se ve así:

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

Debido a su contenido, la altura de div.Contentsuele ser mayor que el espacio proporcionado por div.FixedHeightContainer. Por el momento, div.Contentalegremente se extiende desde el fondo de div.FixedHeightContainer- no en absoluto lo que quiero.

¿Cómo especifico que div.Contentobtenga barras de desplazamiento (preferiblemente solo verticales, pero no soy quisquilloso) cuando su altura es demasiado grande para caber?

overflow:autoy overflow:scrollno hacen nada, por alguna extraña razón.

css scrollbar overflow

— David
fuente

154

configurar el overflowdebería encargarse de ello, pero también debe configurar la altura de Content. Si no se establece el atributo de altura, el div crecerá verticalmente tan alto como sea necesario y no se necesitarán barras de desplazamiento.

Ver ejemplo: http://jsfiddle.net/ftkbL/1/

— Dutchie432
fuente

Bien gracias. ¿Entonces necesito especificar una altura para div.Content? Supuse que saldría del contenedor que no encajaría, y aplicaría barras de desplazamiento sobre esa base.

— David

6

Si da Contentuna altura fija, no debe dar FixedHeightContaineruna altura fija, porque no puede saber qué tan alto será su título, por lo que Contentpuede ser eliminado. Ver: jsfiddle.net/ftkbL/2 Debe establecer la altura fija solo en el elemento con overflow: scroll. Ver jsfiddle.net/ftkbL/3 o jsfiddle.net/ftkbL/4

— RoToRa

Veo su punto (desde el primer enlace) pero el texto del título es conocido y es demasiado corto para dividirlo en una línea a menos que el usuario infle el texto a un tamaño poco práctico.

— David

¿Hay alguna forma de tener una altura corta y ocultar la barra de desplazamiento al mismo tiempo? de esta manera, cuando los usuarios arrastren hacia abajo en dispositivos móviles, verán que se están desplazando hacia abajo, ¿pero sin la molestia de ver 2 barras de desplazamiento en su navegador?

— klewis

@blackhawk - No que yo sepa. Es posible que deba usar Javascript para esto. Específicamente, estoy pensando en la biblioteca jQuery Draggable: jqueryui.com/draggable -una cosa a considerar es ... ¿cómo sabrán los usuarios de escritorio cómo desplazarse?

— Dutchie432

2

FWIW, aquí está mi enfoque = uno simple que funciona para mí:

<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;
}

— John amor
fuente

1

Código de la respuesta anterior de Dutchie432

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

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

— Charitha Goonewardena
fuente

-2

overflowpropiedad de uso

overflow: hidden; 

overflow: auto;

overflow: scroll;

— bisma
fuente