You could use calc
function to calculate remaining height for 2nd div.
*{_x000D_
box-sizing: border-box;_x000D_
}_x000D_
_x000D_
#div1{_x000D_
height: 50px;_x000D_
background: skyblue;_x000D_
}_x000D_
_x000D_
#div2{_x000D_
height: calc(100vh - 50px);_x000D_
background: blue;_x000D_
}
_x000D_
<div id="div1"></div>_x000D_
<div id="div2"></div>
_x000D_
With CSS tables, you could wrap a div around the two you have there and use this css/html structure:
<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>
Depends on what browsers support these display types, however. I don't think IE8 and below do. EDIT: Scratch that-- IE8 does support CSS tables.
Since you know how many pixels are occupied by the previous content, you can use the calc()
function:
height: calc(100% - 50px);
One way is to set the the div to position:absolute
and give it a top of 50px and bottom of 0px;
#div2
{
position:absolute;
bottom:0px;
top:50px
}
You can use
display: flex;
CSS property, as mentioned before by @Ayan, but I've created a working example: https://jsfiddle.net/d2kjxd51/
I faced the same challenge myself and found these 2 answers using flex
properties.
CSS
.container {
display: flex;
flex-direction: column;
}
.dynamic-element{
flex: 1;
}
You can use this 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;
}
Just apply the class .fill
to any of the children to make then occupy the remaining height.
<div id="container">
<div>
Lorem ipsum
</div>
<div>
Lorem ipsum
</div>
<div class="fill"> <!-- this will fill the remaining height-->
Lorem ipsum
</div>
</div>
It works with how many children you want, no additional markup is required.
<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;
}
Why not use padding with negative margins? Something like this:
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
And then
.parent {
padding-top: 1em;
}
.child1 {
margin-top: -1em;
height: 1em;
}
.child2 {
margin-top: 0;
height: 100%;
}
I tried with CSS, and or you need to use display: table or you need to use new css that is not yet supported on most browsers (2016).
So, I wrote a jquery plugin to do it for us, I am happy to share it:
_x000D_
//Credit Efy Teicher_x000D_
$(document).ready(function () {_x000D_
$(".fillHight").fillHeight();_x000D_
$(".fillWidth").fillWidth();_x000D_
});_x000D_
_x000D_
window.onresize = function (event) {_x000D_
$(".fillHight").fillHeight();_x000D_
$(".fillWidth").fillWidth();_x000D_
}_x000D_
_x000D_
$.fn.fillHeight = function () {_x000D_
var siblingsHeight = 0;_x000D_
this.siblings("div").each(function () {_x000D_
siblingsHeight = siblingsHeight + $(this).height();_x000D_
});_x000D_
_x000D_
var height = this.parent().height() - siblingsHeight;_x000D_
this.height(height);_x000D_
};_x000D_
_x000D_
_x000D_
$.fn.fillWidth = function (){_x000D_
var siblingsWidth = 0;_x000D_
this.siblings("div").each(function () {_x000D_
siblingsWidth += $(this).width();_x000D_
});_x000D_
_x000D_
var width =this.parent().width() - siblingsWidth;_x000D_
this.width(width);_x000D_
}
_x000D_
* {_x000D_
box-sizing: border-box;_x000D_
}_x000D_
_x000D_
html {_x000D_
}_x000D_
_x000D_
html, body, .fillParent {_x000D_
height: 100%;_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>_x000D_
<div class="fillParent" style="background-color:antiquewhite">_x000D_
<div>_x000D_
no1_x000D_
</div>_x000D_
<div class="fillHight">_x000D_
no2 fill_x000D_
</div>_x000D_
<div class="deb">_x000D_
no3_x000D_
</div>_x000D_
</div>
_x000D_
Source: Stackoverflow.com