html - toda - div que ocupe todo el ancho de la pantalla
Rellene el espacio vertical restante: solo CSS (9)
Necesito llenar el espacio vertical restante de #wrapper en #first con #second div.
Necesito una única solución CSS.
HTML:
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
CSS:
#wrapper
{
width:300px;
height:100%;
}
#first
{
width:300px;
height:200px;
background-color:#F5DEB3;
}
#second
{
width:300px;
height:100%; //<-----This should fill the remaining space
background-color:#9ACD32;
}
Solución Flexbox
Nota: Agregue los prefijos del proveedor de flex si sus navegadores compatibles lo requieren.
html, body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
width: 300px;
height: 100%;
}
.first {
height: 50px;
}
.second {
flex-grow: 1;
}
<div class="wrapper">
<div class="first" style="background:#b2efd8">First</div>
<div class="second" style="background:#80c7cd">Second</div>
</div>
¿Has intentado cambiar la altura de la envoltura a vh en lugar de%?
#wrapper {
width:300px;
height:100vh;
}
Eso funcionó muy bien para mí cuando quería llenar mi página con un fondo degradado, por ejemplo ...
Puede utilizar CSS Flexbox en lugar de otro valor de visualización. El módulo Flexbox Layout (Caja flexible) tiene como objetivo proporcionar una forma más eficiente de diseñar, alinear y distribuir el espacio entre los elementos en un contenedor, incluso cuando su tamaño es desconocido y / o dinámico.
Ejemplo
/* CONTAINER */
#wrapper
{
width:300px;
height:300px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/* SOME ITEM CHILD ELEMENTS */
#first
{
width:300px;
height: 200px;
background-color:#F5DEB3;
}
#second
{
width:300px;
background-color: #9ACD32;
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, */
}
Si quieres tener soporte completo para navegadores antiguos como IE9 o inferior, deberás usar polyfills como flexy , este polyfill habilita el soporte para el modelo Flexbox pero solo para las especificaciones de 2012 del modelo flexbox.
Recientemente encontré otro polyfill para ayudarte con Internet Explorer 8 y 9 o cualquier navegador más antiguo que no tenga soporte para el modelo de flexbox, todavía no lo he probado pero dejo el enlace here
Puede encontrar una útil y completa guía sobre el modelo Flexbox de Chris Coyer aquí
Puedes hacer esto con la position:absolute; en el #second div como este:
CSS:
#wrapper{
position:relative;
}
#second {
position:absolute;
top:200px;
bottom:0;
left:0;
width:300px;
background-color:#9ACD32;
}
EDIT: solución alternativa
Dependiendo de su diseño y el contenido que tenga en esos divs, podría hacerlo mucho más simple y con menos marcado de esta manera:
HTML:
<div id="wrapper">
<div id="first"></div>
</div>
CSS:
#wrapper {
height:100%;
width:300px;
background-color:#9ACD32;
}
#first {
background-color:#F5DEB3;
height: 200px;
}
Si no desea tener alturas de fijación para su contenedor principal (superior, inferior, ...), simplemente puede usar este css-file para obtener un contenedor flexible que utiliza el espacio restante incl. ¡¡¡trabajando!!! barras de desplazamiento
<!DOCTYPE html>
<html >
<head>
<title>Flex Container</title>
<link rel="stylesheet" href="http://demo.qooxdoo.org/5.0/framework/indigo-5.0.css">
<style>
.cont{
background-color: blue;
position: absolute;
height: 100%;
width: 100%;
}
.headerContainer {
background-color: green;
height: 100px;
width: 100%;
}
.mainContainer {
background-color: white;
width: 100%;
overflow: scroll
}
.footerContainer {
background-color: gray;
height: 100px;
width: 100%;
}
</style>
</head>
<body class="qx-flex-ready" style="height: 100%">
<div class="qx-vbox cont">
<div class="headerContainer">Cell 1: flex1</div>
<div class="mainContainer qx-flex3">
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
</div>
<div class="footerContainer" >Cell 3: flex1</div>
</div>
</body>
</html>
Si puede agregar un par adicional de divs para que su html se vea así:
<div id="wrapper">
<div id="first" class="row">
<div class="cell"></div>
</div>
<div id="second" class="row">
<div class="cell"></div>
</div>
</div>
Puede hacer uso de la display:table propiedades de la display:table :
#wrapper
{
width:300px;
height:100%;
display:table;
}
.row
{
display:table-row;
}
.cell
{
display:table-cell;
}
#first .cell
{
height:200px;
background-color:#F5DEB3;
}
#second .cell
{
background-color:#9ACD32;
}
Solo puede agregar la opción de desbordamiento: automático :
#second
{
width:300px;
height:100%;
overflow: auto;
background-color:#9ACD32;
}
Todo lo que necesitas es un poco de marcado mejorado. Envuelve el segundo dentro del primero y se renderizará debajo.
<div id="wrapper">
<div id="first">
Here comes the first content
<div id="second">I will render below the first content</div>
</div>
</div>
necesita javascript y algunos cálculos del lado del cliente: http://jsfiddle.net/omegaiori/NERE8/2/
necesitarás jquery para lograr de manera efectiva lo que deseas. esta función es muy simple pero muy efectiva:
(function () {
var heights = $("#wrapper").outerHeight(true);
var outerHeights = $("#first").outerHeight(true);
jQuery(''#second'').css(''height'', (heights - outerHeights) + "px");
})();
primero detecta la altura de la envoltura, ya que está configurada al 100%, es diferente cada vez (depende de qué pantalla esté aterrizando). en el segundo paso, le da a #second div la altura apropiada restando de la altura de la envoltura la #first altura del div. el resultado es la altura disponible en el envoltorio div