Make DIV fill remainder of page vertically?
You could use absolute positioning.
HTML
<div id="content">
<div id="header">
Header
</div>
This is where the content starts.
</div>
CSS
BODY
{
margin: 0;
padding: 0;
}
#content
{
border: 3px solid #971111;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #DDD;
padding-top: 85px;
}
#header
{
border: 2px solid #279895;
background-color: #FFF;
height: 75px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
By positioning #content
absolutely and specifying the top, right, bottom, and left properties, you get a div taking up the entire viewport.
Then you set padding-top
on #content
to be >= the height of #header
.
Finally, place #header
inside #content
and position it absolutely (specifying top, left, right, and the height).
I'm not sure how browser friendly this is. Check out this article at A List Apart for more information.
How to make a div fill remaining vertical space?
A different approach would be to use display: flex
html, body{ height:100%; margin: 0;}.wrapper { display: flex; flex-flow: column; height: 100%;}.topbar { flex: 0 1 auto; height: 50px;}.container-fluid { flex: 1 1 auto;}
<div class="wrapper"> <div class="topbar" style="border: 2px solid red;"></div>
<div class="container-fluid" style="border: 2px solid black;"> <div class="row-fluid" style="border: 2px solid green;"> <div class="col-lg-12"></div> </div> </div> </div>
Make a div fill the height of the remaining screen space
2015 update: the flexbox approach
There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.
Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.
(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.
To check current support you can also see here:
http://caniuse.com/#feat=flexbox
Working example
With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.
html,body { height: 100%; margin: 0;}
.box { display: flex; flex-flow: column; height: 100%;}
.box .row { border: 1px dotted grey;}
.box .row.header { flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */}
.box .row.content { flex: 1 1 auto;}
.box .row.footer { flex: 0 1 40px;}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box"> <div class="row header"> <p><b>header</b> <br /> <br />(sized to content)</p> </div> <div class="row content"> <p> <b>content</b> (fills remaining space) </p> </div> <div class="row footer"> <p><b>footer</b> (fixed height)</p> </div></div>
Make inner div fill remaining height using flex
I edited @Sfili_81's answer and added these to the *
margin: 0;
padding: 0;
Here's the entire code
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.home-content {
display: flex;
border: 1px solid black;
height: 100vh;
flex-flow: column;
}
.container {
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid red;
}
#listItems {
border: 3px solid green;
flex: 1 1 100%;
}
<div class="home-section">
<div class="home-content">
<div class="container">
<form>
<label for="example">Input</label>
<input type="text" name="example">
</form>
<div id="listItems">
</div>
</div>
</div>
</div>
Fill remaining vertical space with CSS using display:flex
Make it simple : DEMO
section { display: flex; flex-flow: column; height: 300px;}
header { background: tomato; /* no flex rules, it will grow */}
div { flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/ background: gold; overflow: auto;}
footer { background: lightgreen; min-height: 60px; /* min-height has its purpose :) , unless you meant height*/}
<section> <header> header: sized to content <br/>(but is it really?) </header> <div> main content: fills remaining space<br> x <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> <!-- uncomment to see it break --> 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> <footer> footer: fixed height in px </footer></section>
Fill remaining vertical space - only CSS
You can do this with position:absolute;
on the #second
div like this :
FIDDLE
CSS :
#wrapper{
position:relative;
}
#second {
position:absolute;
top:200px;
bottom:0;
left:0;
width:300px;
background-color:#9ACD32;
}
EDIT : Alternative solution
Depending on your layout and the content you have in those divs, you could make it much more simple and with less markup like this :
FIDDLE
HTML :
<div id="wrapper">
<div id="first"></div>
</div>
CSS :
#wrapper {
height:100%;
width:300px;
background-color:#9ACD32;
}
#first {
background-color:#F5DEB3;
height: 200px;
}
Related Topics
Set a Height Value on an Individual CSS Grid Row
Wrap Text Around an Image on Bootstrap 3
Purgecss Whitelist Patterns with Tailwindcss
Browser Handling of CSS "Transparent" in Gradients
Resource Interpreted as Script But Transferred with Mime Type Text/X-C++
Remove Unwanted Space with Position Sticky
CSS Attribute Selector + Descendant Gives a Bug in Webkit
Give a CSS Styled Div a "Border-Left-Image"
Force Elements to Be Horizontally Aligned
Make CSS :Hover Only Affect Parent Element
iOS Safari Transition Transform Not Working
How It Works CSS Font-Weight Values
Do Images Load Faster in HTML or CSS
How to Center Form in Twitter Bootstrap
Margin Behavior of "Overflow:Hidden" Div After Floating Div on Webkit