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;
}
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>
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 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>
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>
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>
Related Topics
This Ie and Ie6 Hack with Only CSS
Iframe Z-Index for Drop Down Menu
Change in Doctype Causes Webpage to Render Differently
Why Are These Two Inline-Blocks Not Aligned
Ie (11) Improper Handling of CSS Multi-Columns
Input[Type=Select] Doesn't Work for Me
How to Say "Use The Current Font Weight" Without Making It Lighter/Bolder
Making a Button and Textbox The Same Height Next to Each Other
Center Image Vertically and Horizontally Inside of Div with Float:Left
How to Make a "Double Arrow" with CSS3 Content Technique
How to Stack Two Same-Sized Canvas on Top of Each Other
How to Make an Empty Div Take Space
What CSS Tools (Framework,Grids System, Ide,..) Do I Need for Starting Web Design
How to Make a Div with a Rails Link Clickable
CSS Layout for Footer at Bottom with Dynamic Ajax Content Changing Height of Page