html - hacer - div que ocupe toda la pantalla

¿Cómo hacer div ocupar altura restante?

Question

Tengo este problema, tengo dos divs:

<div style="width:100%; height:50px;" id="div1"></div>
<div style="width:100%;" id="div2"></div>

¿Cómo hago que div2 ocupe la altura restante de la página?

Answer 1

Demo

Una forma es configurar el div en la position:absolute y darle un máximo de 50px y un mínimo de 0px;

#div2
{
position:absolute;
bottom:0px;
top:50px
}

Answer 2

¿Por qué no usar relleno con márgenes negativos? Algo como esto:

<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>

Y entonces

.parent {
padding-top: 1em;
}
.child1 {
margin-top: -1em;
height: 1em;
}
.child2 {
margin-top: 0;
height: 100%;
}

Answer 3

Con las tablas CSS, podría ajustar un div alrededor de los dos que tiene allí y usar esta estructura css / html:

<style type="text/css">
.container { display:table; width:100%; height:100%; }
#div1 { display:table-row; height:50px; background-color:red; }
#div2 { display:table-row; background-color:blue; }
</style>
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>

Sin embargo, depende de qué navegadores admitan estos tipos de visualización. No creo que IE8 y abajo lo hagan. EDIT: Scratch that-- IE8 soporta tablas CSS.

Answer 4

Probé con CSS, o necesita usar display: table o necesita usar un nuevo css que aún no es compatible con la mayoría de los navegadores (2016).

Entonces, escribí un plugin jquery para hacerlo por nosotros, estoy feliz de compartirlo:

//Credit Efy Teicher
$(document).ready(function () {
$(".fillHight").fillHeight();
$(".fillWidth").fillWidth();
});
window.onresize = function (event) {
$(".fillHight").fillHeight();
$(".fillWidth").fillWidth();
}
$.fn.fillHeight = function () {
var siblingsHeight = 0;
this.siblings("div").each(function () {
siblingsHeight = siblingsHeight + $(this).height();
});
var height = this.parent().height() - siblingsHeight;
this.height(height);
};
$.fn.fillWidth = function (){
var siblingsWidth = 0;
this.siblings("div").each(function () {
siblingsWidth += $(this).width();
});
var width =this.parent().width() - siblingsWidth;
this.width(width);
}

 * {
box-sizing: border-box;
}
html {
}
html, body, .fillParent {
height: 100%;
margin: 0;
padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="fillParent" style="background-color:antiquewhite">
<div>
no1
</div>
<div class="fillHight">
no2 fill
</div>
<div class="deb">
no3
</div>
</div>

Answer 5

Puede utilizar este http://jsfiddle.net/Victornpb/S8g4E/783/

#container {
display: table;
width: 400px;
height: 400px;
}
#container > div{
display: table-row;
height: 0;
}
#container > div.fill{
height: auto;
}

Simplemente aplique la clase .fill a cualquiera de los niños para que luego ocupe la altura restante.

<div id="container">
<div>
Lorem ipsum
</div>
<div>
Lorem ipsum
</div>
<div class="fill"> <!-- this will fill the remaining height-->
Lorem ipsum
</div>
</div>

Funciona con la cantidad de hijos que desea, no se requiere un marcado adicional.

Answer 6

Puedes usar

display: flex;

Propiedad de CSS, como lo mencionó anteriormente @Ayan, pero he creado un ejemplo funcional: https://jsfiddle.net/d2kjxd51/

Answer 7

Usar posicionamiento absoluto:

#div1{
width: 100%;
height: 50px;
background-color:red;/*Development Only*/
}
#div2{
width: 100%;
position: absolute;
top: 50px;
bottom: 0;
background-color:blue;/*Development Only*/
}

<div id="div1"></div>
<div id="div2"></div>

Answer 8

Ya que sabes cuántos píxeles están ocupados por el contenido anterior, puedes usar la función calc() :

height: calc(100% - 50px);

Answer 9

Yo mismo enfrenté el mismo desafío y encontré estas 2 respuestas usando las propiedades de flex .

CSS

.container {
display: flex;
flex-direction: column;
}
.dynamic-element{
flex: 1;
}

• https://.com/a/35348188/1084619
• https://.com/a/35348188/1084619

Answer 10

<div>
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
#header {
height: 200px;
}
#content {
height: 100%;
margin-bottom: -200px;
padding-bottom: 200px;
margin-top: -200px;
padding-top: 200px;
}
#footer {
height: 200px;
}