div - title html
Cómo llenar el 100% de la altura restante? (8)
+--------------------+
| |
| |
| |
| |
| 1 |
| |
| |
| |
| |
+--------------------+
| |
| |
| |
| |
| 2 |
| |
| |
| |
| |
+--------------------+
Se desconoce el contenido de (1) como se muestra arriba, ya que puede aumentar o disminuir en páginas generadas dinámicamente. El segundo div (2) como se muestra arriba, debe llenar el espacio restante.
aquí hay un ejemplo de mi html
<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>
css ...
#full{width: 300px; background-color: red;}
#someid{height: 100%;}
¿O es este método incorrecto? ¿Cómo debería hacer esto? por favor mira mi demo y muéstrame mi error.
Agregué esto para las páginas que eran demasiado cortas.
html:
<section id="secondary-foot"></section>
css:
section#secondary-foot {
height: 100%;
background-color: #000000;
position: fixed;
width: 100%;
}
Crea un div, que contiene ambos divs (full y someid) y establece el alto de ese div a lo siguiente:
altura: 100vh;
La altura de los divs que lo contienen (full y someid) debe establecerse en "auto". Eso es todo.
Debería poder hacer esto si agrega un div ( #header continuación) para envolver su contenido de 1.
Si
#header, el contenido de#someidse verá obligado a fluir a su alrededor.A continuación, establece el ancho
#headeral 100%. Esto hará que se expanda para llenar el ancho del div que contiene,#full. Esto efectivamente empujará todo el contenido de#headerdebajo de#headerya que no hay espacio para fluir por los lados.Finalmente, establezca la altura de
#someiden 100%, esto hará que tenga la misma altura que#full.
HTML
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
CSS
html, body, #full, #someid {
height: 100%;
}
#header {
float: left;
width: 100%;
}
Actualizar
Creo que vale la pena mencionar que Flexbox está bien soportado en los navegadores modernos en la actualidad. El CSS se puede modificar si #full convierte en un contenedor flexible, y #someid debe configurar su crecimiento flexible en un valor superior a 0 .
html, body, #full {
height: 100%;
}
#full {
display: flex;
flex-direction: column;
}
#someid {
flex-grow: 1;
}
Esto se puede hacer con tablas:
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr height="0%"><td>
<div id="full">
<!--contents of 1 -->
</div>
</td></tr>
<tr><td>
<div id="someid">
<!--contents of 2 -->
</div>
</td></tr>
</table>
A continuación, aplique CSS para hacer que unid llene el espacio restante:
#someid {
height: 100%;
}
Ahora, puedo escuchar los gritos enojados de la multitud: "¡Oh, no, está usando mesas! ¡Aliméntalo con los leones!" Por favor escúchame.
A diferencia de la respuesta aceptada que no logra nada aparte de hacer que el contenedor div divida toda la altura de la página, esta solución hace que div # 2 llene el espacio restante según lo solicitado en la pregunta. Si necesita ese segundo div para llenar toda la altura asignada, esta es la única forma de hacerlo.
¡Pero no dude en demostrarme que estoy equivocado, por supuesto! CSS siempre es mejor
Para obtener un div al 100% de altura en una página, también deberá establecer cada objeto en la jerarquía por encima del div al 100%. por ejemplo:
html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }
Aunque no puedo entender completamente tu pregunta, supongo que esto es lo que quieres decir.
Este es el ejemplo del que estoy trabajando:
<html style="height:100%">
<body style="height:100%">
<div style="height:100%; width: 300px;">
<div style="height:100%; background:blue;">
</div>
</div>
</body>
</html>
Style es solo un reemplazo para el CSS que no he externalizado.
Sé que esta es una entrada tardía, pero incluso en 2016 estoy sorprendido por la falta total de soporte de IE para flex (actualmente 11 es el único que lo admite y su mayor error es http://caniuse.com/#feat=flexbox ) que desde una perspectiva comercial no es genial. Así que creo que hasta que IE se cierre la mejor solución y la mayoría de los amigables con varios navegadores seguro que debe ser una JS / Jquery?
La mayoría de los sitios ya usan Jquery y un ejemplo muy simple (para mi código) es:
$(''#auto_height_item'').height($(window).height() - $(''#header'').height());
Obviamente puede reemplazar la ventana y el encabezado y dejar que las matemáticas básicas hagan el trabajo. Personalmente todavía no estoy convencido sobre la flexión ...
Si sus espacios necesitan corregir exactamente los bordes de la pantalla, puede intentar
hacer una gran div con:
top:0;
bottom:0;
margin:0px auto;
y dentro de hacer 2 div s con
height:50%;
margin:0px auto;
Es muy similar al enfoque de thgaskell, pero es más flexible y cumple con CSS3. Puede tratar de realizar una fusión y probarla para ver si se adapta mejor a todas las orientaciones y dispositivos que necesita.
html,
body {
height: 100%;
}
.parent {
display: flex;
flex-flow:column;
height: 100%;
background: white;
}
.child-top {
flex: 0 1 auto;
background: pink;
}
.child-bottom {
flex: 1 1 auto;
background: green;
}
<div class="parent">
<div class="child-top">
This child has just a bit of content
</div>
<div class="child-bottom">
And this one fills the rest
</div>
</div>