resto - Cómo estirar la altura de div para llenar div principal-CSS
div que ocupe el resto de la pantalla (6)
Lo que convenía a mi propósito era crear un div que siempre estuviera delimitado dentro de la ventana general del navegador por un monto fijo.
Lo que funcionó, al menos en Firefox, fue esto
<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">
En la medida en que la ventana real no se vea obligada a desplazarse, el div conserva sus límites al borde de la ventana durante todo el redimensionamiento.
Espero que esto le ahorre a alguien algo de tiempo.
Tengo una página con divs como a continuación
<div id="container">
<div id="A">
</div>
<div id="B">
<div id="B1"></div>
<div id="B2">B2</div>
</div>
<div id="C"></div>
<div id="D">
</div>
</div>
con estilo como;
html, body {
margin: 0;
padding: 0;
border: 0;
}
#B, #C, #D {
position: absolute;
}
#A{
top: 0;
width: 100%;
height: 35px;
background-color: #99CC00;
}
#B {
top: 35px;
width: 200px;
bottom: 35px;
background-color: #999999;
z-index:100;
}
#B2 {
margin-top: -35px;
bottom: 0;
background-color: #FFFFFF;
width: 200px;
overflow: scroll;
}
#B1 {
height: 35px;
width: 35px;
margin-left: 200px;
background-color: #CC0066;
}
#C {
top: 35px;
left: 200px;
right: 0;
bottom: 35px;
background-color: #CCCCCC;
}
#D {
bottom: 0;
width: 100%;
height: 35px;
background-color: #3399FF;
}
Quiero ajustar la altura de div B2 para rellenar (o estirar) todo div B (marcado con un borde verde) y no quiero cruzar el pie de página div D. Aquí hay una demo violín en funcionamiento (actualizada). ¿¿Como puedo resolver esto??
Lo resolvería con una solución de javascript (jQUery) si los tamaños pueden variar.
window.setTimeout(function () {
$(document).ready(function () {
var ResizeTarget = $(''#B'');
ResizeTarget.resize(function () {
var target = $(''#B2'');
target.css(''height'', ResizeTarget.height());
}).trigger(''resize'');
});
}, 500);
Si vas a usar B2 para diseñar, puedes probar este "truco"
#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}
Simplemente agregue height: 100%; en el estilo #B2 . min-height no debería ser necesaria.
Supongamos que tiene
<body>
<div id="root" />
</body>
Con CSS normal, puede hacer lo siguiente. Consulte una aplicación en funcionamiento https://github.com/onmyway133/Lyrics/blob/master/index.html
#root {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
Con flexbox, puedes
html, body {
height: 100%
}
body {
display: flex;
align-items: stretch;
}
#root {
width: 100%
}
Use la propiedad "min-height"
Tenga cuidado con los almohadones, los márgenes y las fronteras :)
html, body {
margin: 0;
padding: 0;
border: 0;
}
#B, #C, #D {
position: absolute;
}
#A{
top: 0;
width: 100%;
height: 35px;
background-color: #99CC00;
}
#B {
top: 35px;
width: 200px;
bottom: 35px;
background-color: #999999;
z-index:100;
}
#B2 {
min-height:100%;
height:100%
margin-top: -35px;
bottom: 0;
background-color: red;
width: 200px;
overflow: scroll;
}
#B1 {
height: 35px;
width: 35px;
margin-left: 200px;
background-color: #CC0066;
}
#C {
top: 35px;
left: 200px;
right: 0;
bottom: 35px;
background-color: #CCCCCC;
}
#D {
bottom: 0;
width: 100%;
height: 35px;
background-color: #3399FF;
}