barra de desplazamiento sin elevación/altura dinámica fija con barra de desplazamiento

que tiene esta estructura HTML:barra de desplazamiento sin elevación/altura dinámica fija con barra de desplazamiento

<div id="body"> 
    <div id="head"> 
     <p>Dynamic height without scrollbar</p> 
    </div> 
    <div id="content"> 
     <p>Dynamic height with scrollbar</p> 
    </div> 
    <div id="foot"> 
     <p>Fixed height without scrollbar</p> 
    </div> 
</div>

Quiero tener las tres piezas en el interior de la parte principal (#body) sin rebosadero. Entonces necesito una barra de desplazamiento en la parte media.

yo probamos este CSS:

#content{ 
    border: red solid 1px; 
    overflow-y: auto; 
}

Y esto:

#content{ 
    border: red solid 1px; 
    overflow-y: auto; 
    height: 100%; 
}

Pero ninguno de ellos trabajan.

Hice un ejemplo al JSFiddle.

¿Puedo hacer esto solo con CSS y HTML? Prefiero evitar Javascript.

Fuente

2012-06-11 GuillaumeS

Flexbox es una alternativa moderna que le permite hacer esto sin alturas fijas o JavaScript

Configuración display: flex; flex-direction: column; en el recipiente y flex-shrink: 0; en la cabecera y el pie. divs hace el truco:

http://jsfiddle.net/cvmrvfhm/1/

Fuente

2016-08-24 13:27:55 mtyaka

Creo que esta respuesta debe aceptarse como la respuesta para CSS3. – hjchin

Creo que no es la respuesta correcta. No funcionará sin una altura fija para el elemento del cuerpo. – Equanox

@Equanox La altura limitada del contenedor es el punto, de lo contrario las tres partes simplemente se expandirían verticalmente y no habría necesidad de barras de desplazamiento. Tenga en cuenta que puede ser un 'max-height' en lugar de un' height' fijo. – mtyaka

No sé si lo hice bien, pero ¿resuelve el problema this?

acabo de cambiar el overflow-y: scroll;

#content{ 
    border: red solid 1px; 
    overflow-y: scroll; 
    height: 100px; 
}

Editado

A continuación, intente utilizar valores porcentuales como este: http://jsfiddle.net/6WAnd/19/

CSS marcado:

#body { 
    position: absolute; 
    top; 150px; 
    left: 150px; 
    height: 98%; 
    width: 500px; 
    border: black dashed 2px; 
}  
#head { 
    border: green solid 1px; 
    height: 15%; 
} 
#content{ 
    border: red solid 1px; 
    overflow-y: scroll; 
    height: 70%; 
} 
#foot { 
    border: blue solid 1px; 
    height: 15%; 
}

Fuente

2012-06-11 13:20:51 Luis

Pero no se puede establecer el tamaño de #head y #content me gustaría #content y #head llenar todo el div principal. (#cuerpo). Acabo de hacer una imagen para ilustrarlo: http://img15.hostingpics.net/pics/986131examplepanel.png – GuillaumeS

Ok, vamos a ver si esto resuelve su problema, verifique mi edición – Luis

Esta solución no permite tener 2 bloques con altura dinámica. Si pongo mucho texto en la primera parte, no funciona: http://jsfiddle.net/6WAnd/21/. Creo que @ philip-bevan ha descubierto que no es posible sin JS. Vea su responder a continuación. – GuillaumeS

Utilice:

#head { 
    border: green solid 1px; 
    height:auto; 
}  
#content{ 
      border: red solid 1px; 
      overflow-y: scroll; 
      height:150px;  
     }

Fuente

2012-06-11 13:22:43 Uttara

es un trabajo menos que si cambio de la primera parte. Pruebe con una gran cantidad de "

tamaño dinámico y sin barra de desplazamiento

" http://jsfiddle.net/EKvCw/ – GuillaumeS

editar el código anterior, que tratan – Uttara

Tendrá que especificar una altura fija, no se puede utilizar el 100% porque no hay nada para que esto se compara con, como en height=100% de qué?

violín Editado:

http://jsfiddle.net/6WAnd/4/

Fuente

2012-06-11 13:26:19

se tienen razón, no es realmente 100% pero quiero que los 3 div (cabeza, contenido y pie) tomen 100% de altura de la parte del cuerpo que tiene un tamaño fijo. Realizo una imagen, por ejemplo: http: //img15.hostingpics. net/pics/986131examplepanel.png – GuillaumeS

¿su cuerpo o su cabeza tienen una altura fija? –

Mething como: http://jsfiddle.net/6WAnd/10/ –

La respuesta JS a esta pregunta es:

http://jsfiddle.net/6WAnd/20/

o algo similar

Fuente

2012-06-11 15:31:48

Un enfoque rápido y limpio con muy poca JS y Relleno de CSS: http://jsfiddle.net/benjamincharity/ZcTsT/14/

var headerHeight = $('#header').height(), 
    footerHeight = $('#footer').height(); 

$('#content').css({ 
    'padding-top': headerHeight, 
    'padding-bottom': footerHeight 
});

Fuente

2013-04-20 18:32:37 Benjamin

<div id="scroll"> 
    <p>Try to add more text</p> 
</div>

Aquí está el código CSS

#scroll { 
    overflow-y:auto; 
    height:auto; 
    max-height:200px; 
    border:1px solid black; 
    width:300px; 
}

aquí está la demostración JSFIDDLE

Fuente

2014-10-16 07:19:18 user4148647

Utilice esta:

style = "max-height: 300px; overflow: auto;"

Tto evitar una Altura fija

Fuente

2015-04-23 06:28:06

El desplazamiento solo funciona cuando la altura está configurada ¿verdad? No funciona con 'max-height' solo. – Bazley

barra de desplazamiento sin elevación/altura dinámica fija con barra de desplazamiento

Respuesta

Cuestiones relacionadas