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;
}
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>
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>
CSS how to make divs fill all the vertical space
You can add display: flex; flex-direction: column;
to the #wrapper
and set the child divs to flex: 1
.
This will allow them to grow to fill the available space: https://jsfiddle.net/jpdjkdr0/1/
.hide { display:none;}#wrapper { height: 500px; width:500px; border: 10px solid violet; display: flex; flex-direction: column;}#wrapper div { flex: 1;}#div-1 { background: brown; color: white;}#div-2 { background: green; color: white;}#div-3 { background: red; color: white;}#div-4 { background: blue; color: white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button onclick="$('#div-1').toggle()">show div</button><div id="wrapper"><div id="div-1" class="hide">1</div><div id="div-2">2</div><div id="div-3">3</div><div id="div-4">4</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>
Flexbox fill available space vertically
So you can try this:
flex-direction: column
for the flex container.flex: 1
for the element that needs to fill the remaining space.
See demo below where the flexbox
spans the viewport height:
body { margin: 0;}*{ box-sizing: border-box;}.row { display: flex; flex-direction: column; height: 100vh;}.flex { flex: 1;}.row, .row > * { border: 1px solid;}
<div class="row"> <div>some content</div> <div class="flex">This fills the available space</div> <!-- fills/grows available space --> <div>another content</div></div>
Related Topics
CSS Media Queries and Size of Images
What CSS Tools (Framework,Grids System, Ide,..) Do I Need for Starting Web Design
Why Do My Icons Line Up Top-To-Bottom Instead of Flowing Left-To-Right in a Div Layout
How to Set The Current Frame (Or Similar) of a CSS Animation
Button Border Radius and Cursor
Scroll Bug in Ie7 and Ie9 When Using CSS3Pie Gradient
Static Webpage on Nginx Docker Container Missing CSS
How to Make a "Double Arrow" with CSS3 Content Technique
Why Do Font Squirrel's @Font-Face Definitions Contain Two Src Declarations
CSS Layout That Fills Available Space
How to Center Text Inputs Using Materialize CSS
Svg CSS Rounded Corner Not Working
Changing The Colors of Rpivottable in Shiny
Timing Within a CSS Image Slider