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 Div fill remaining height
Give the container:
display:flex;
flex-direction:column;
and for the element:
flex:1;
The demo:
https://jsfiddle.net/ugjfwbg4/1/
body { background-color: red; height: 100%;}
.wrap { height: 100vh; width: 100%; padding: 20px; background-color: yellow; display:flex; flex-direction:column;}
.top { width: 100%; height: 50px; background-color: blue;}
.mid { width: 100%; background-color: green; flex:1; display:flex; flex-direction:column;}
.left{ flex:1; width: 50%; background-color: red;}
.bottom { width: 100%; height: 50px; background-color: blue;}
<div class="wrap"> <div class="top"></div>
<div class="mid"> <div class="left">left</div> </div>
<div class="bottom"></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>
CSS: Have content take up remaining height and its children share the same height equally
Using flex
:
body {
font-family: sans-serif;
}
html,
body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.app {
min-height: 100%;
background: #00fa
}
.app,
.content {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
background: #fe0;
}
.content > a {
flex: 1;
border:solid 1px;
}
.nav {
display: flex;
}
<div id="app" class="app">
<nav class="nav">
<li>some</li>
<li>nav</li>
<li>items</li>
</nav>
<header>
<h2>
Where do you want to go?
</h2>
</header>
<!-- Content should take all of the remaining available height -->
<div class="content">
<!-- Link 1, 2, and 3 should take a third of content's height each and take up the full width -->
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
</div>
How to make an HTML div occupy the rest of the available height
You could use css grid on #parent
and control everything from there, and it will be as simple as this :
html {
height:100%;
}
body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
}
#parent {
min-height: 100vh;
display:grid;
grid-template-rows: 50px 1fr
}
#child {
background:yellow;
}
#other-child{
background:red;
}
<html>
<body>
<div id="parent">
<div id="child" >fixed height</div>
<div id="other-child">occupy the rest</div>
</div>
</body>
</html>
Related Topics
Simple Way to Display Data in a .Txt File on a Webpage
How to Prevent Line-Break in a Column of a Table Cell (Not a Single Cell)
Create an Object for Google Chrome
How to Declare a Variable in a Template in Angular
Woocommerce Change Product Image on Hover With CSS
Responsive Fullscreen Youtube Video With No Black Bars
Angular2, What Is the Correct Way to Disable an Anchor Element
How to Get Angular to Reload the Same Page But With a Different Argument
Navbar(Menu) Is Getting Overlapped by Body Element
Item Moving Around When Window Resized
Angular 5, Html, Boolean on Checkbox Is Checked
Grid Items Overflow Out of Parent Container Using CSS Grid
Add Line Break Within Tooltips
Next.Js Background-Image CSS Property Cant Load the Image
Loading Images from External Folder to Component Angular 2