cuerpo HTML es más pequeño que su contenido

He aquí un básico illustration del problema:cuerpo HTML es más pequeño que su contenido

<html><head><style type="text/css"> 
    html {width: 100%; height: 100%; background: red;} 
    body {width: 100%; height: 100%; background: green;} 
     
    .leftbar, .rightbar {height: 100%; background: blue;} 

    .leftbar  {float: left;} 
    .rightbar {float: right;} 

    table {width: 100px; height: 800px; background: black; color: white; 
           margin: 0 auto 0 auto;} 
</style></head> 
<body> 
    <ul class="leftbar"><li>one</li><li>two</li></ul> 
    <ul class="rightbar"><li>alpha</li><li>beta</li></ul> 
    <table><tbody><tr><td>blah blah</td></tr></tbody></table> 
</body> 
</html>

Podemos ver de inmediato que los flotaban ul elementos son tan altos como el body que los contiene, el problema es que el body no es tan alto como el table que contiene.

¿Cómo hago que el body sea lo suficientemente grande? En este ejemplo, quiero que el leftbar y el rightbar bajen, en la medida en que lo permita el desplazamiento, para que nunca pueda ver ningún espacio debajo de ellos.

Fuente

2012-02-22 spraff

-1

Usar tablas. Son impuros pero funcionan.

Las soluciones basadas en div implican compromisos inaceptables (dimensiones absolutas, pérdida de flotación).

Fuente

2012-02-24 17:09:06 spraff

_fsvo_ "trabajo". Es corto de miras pensar que solo porque funcionan para su caso de uso particular, deben funcionar para todos los demás contextos en los que se accederá a su contenido. –

Funcionan en el contexto necesario, y las alternativas * no *. – spraff

No refleja bien en nuestra comunidad que rechacemos una respuesta válida que resuelva el problema del OP, simplemente porque está pasado de moda. Las tablas son difíciles de mantener y rompen el flujo normal, pero son una solución inteligente para varios problemas espinosos de diseño, especialmente en un mundo pre-flexbox. (Como es 'display: table;' en un elemento de nivel de bloque normal.) – XML

Elimina height: 100% de tu regla body - esto hace que el cuerpo sea tan alto como la altura de la ventana gráfica (que es menor que la altura del contenido).

Fuente

2012-02-22 16:02:58

Eso hace que el 'cuerpo' sea más alto, pero el' ul' sigue siendo solo el alto de la ventana gráfica. – spraff

Tiene sentido. Para que 'ul's llene el' cuerpo', necesita tener un determinado conjunto de alturas. Configúrelo en '800px', igual que su elemento secundario más alto. –

Esto tiene tanto sentido y solucionó totalmente este problema aleatorio que tuve en un sitio como hace un año. Lo cambié de altura: 100% a min-height: 100% para dar cuenta de las páginas donde el cuerpo es más corto que la ventana gráfica. ¡Gracias! – elainevdw

body{ height:100%; }

Esto parece ser un malentendido del código. Una altura "100%" es relativa a algo. En otras palabras, "100% de qué?"

Lo que hace esto se establece body = el tamaño de la ventana. en JSFiddle, es del tamaño de la caja representada. En un navegador, sería el 100% de la ventana de visualización.

Por lo tanto, si reduce la ventana de su navegador a un espacio de vista pequeño, el 100% de altura será el 100% del tamaño pequeño. Que es exacto

Si tiene un contenido que es más largo que eso, se encontrará con los problemas que ve en su ejemplo. Recuerde que la tabla es un elemento secundario, no un contenedor primario. CSS hereda de los padres, no de los niños. Por lo tanto, debe asegurarse de que BODY se mantenga dinámico en su configuración de altura.

actualización

He aquí una jsFiddle para min-altura sobre el cuerpo; http://jsfiddle.net/uZCKn/1/ Necesita altura de HTML para que sea 100% efectivo. Entendido desde aquí: min-height does not work with body

Lo único que se me ocurre es un JavaScript para establecer la altura de las barras laterales o para usar columnas falsas. Pero podría haber algo más para obtener la barra izquierda/derecha para llenar la altura de los contenedores que me falta.

Hay una parte de la explicación.

Fuente

2012-02-22 16:14:01 jmbertucci

http://jsfiddle.net/6ZeLh/

para fijar la altura del cuerpo no va todo el camino hacia abajo body{height:100%} cambiar a min-height:100%. Si te importa, esto no funcionará en IE6. Para arreglar tus listas, saca los flotadores. Añadir position:relative a la body, añadir position:absolute a .leftbar, .rightbar y establecer las posiciones de la siguiente manera

.leftbar {left:0; top:0;} 
.rightbar {right:0; top:0;}

Se puede ver en el violín he vinculado anteriormente.

Fuente

2012-02-22 16:21:32 hradac

Ah, esa es una buena solución. Haga las barras laterales en la posición absoluta. – jmbertucci

Si usa flotantes, debe usar clearfix. Ejemplo (overflow: hidden a div padres le dan una solución clara simple):

<div style="overflow: hidden;"> 
    <ul class="leftbar"> 
     <li>one</li> 
     <li>two</li> 
    </ul> 
    <ul class="rightbar"> 
     <li>alpha</li> 
     <li>beta</li> 
    </ul> 
</div>

Usted puede buscar en Google más clearfixes, especialmente para su caso

Fuente

2016-03-19 08:38:14 Indevelop

eliminar

html, body { height: 100%; }

y añadir

body { height: fit-content; }

La otra cosa es para certificar que no hay divisiones para niños eso está haciendo que las cosas sean más pequeñas de lo que realmente deberían ser.

Fuente

2017-11-07 14:27:53

'fit-content' es una propiedad experimental que no debe usarse en el código de producción en 2017. – TylerH

@TylerH podría publicar un enlace para saber más ¿sobre este tema? –

cuerpo HTML es más pequeño que su contenido

Respuesta

Cuestiones relacionadas