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>
How to fill 100% of remaining height?
You should be able to do this if you add in a div (#header
below) to wrap your contents of 1.
If you float
#header
, the content from#someid
will be forced to flow around it.Next, you set
#header
's width to 100%. This will make it expand to fill the width of the containing div,#full
. This will effectively push all of#someid
's content below#header
since there is no room to flow around the sides anymore.Finally, set
#someid
's height to 100%, this will make it the same height as#full
.
JSFiddle
HTML
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
CSS
html, body, #full, #someid {
height: 100%;
}
#header {
float: left;
width: 100%;
}
Update
I think it's worth mentioning that flexbox is well supported across modern browsers today. The CSS could be altered have #full
become a flex container, and #someid
should set it's flex grow to a value greater than 0
.
html, body, #full {
height: 100%;
}
#full {
display: flex;
flex-direction: column;
}
#someid {
flex-grow: 1;
}
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>
Put content in 100% remaining height after navbar
Don't set the #map
position to absolute
as it's not needed for this.
All you have to do is set the height
of #map
to calc(100vh - 80px)
.
#map {
width: 100%;
height: calc(100vh - 80px);
background: red;
}
.nav {
background: hotpink;
height: 80px;
}
Which will take the height of the page and subtract the height of the nav.
How can an html element fill out 100% of the remaining screen height, using css only?
The trick to this is specifying 100% height on the html and body elements.
Some browsers look to the parent elements (html, body) to calculate the height.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
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>
How to make div occupy remaining height?
Use absolute positioning:
#div1{ width: 100%; height: 50px; background-color:red;/*Development Only*/}#div2{ width: 100%; position: absolute; top: 50px; bottom: 0; background-color:blue;/*Development Only*/}
<div id="div1"></div><div id="div2"></div>
Div to fill 100% height of available space
Here's a solution using height:calc();
https://jsfiddle.net/DTcHh/16058/
It was kind of hard to set due to your body padding but it works.
.bottom-row {
height:calc(100vh - 335px);
}
.col-xs-4 {
height:100%;
background-color: red;
color: white;
}
Related Topics
An Url to a Windows Shared Folder
How to Set an HTML Class Attribute in Markdown
Filter Extensions in HTML Form Upload
HTML List Element: Sharing The Parent Width into Equal Parts
Wrapping HTML Table Rows in <A> Tags
Make Anchor Links Refer to The Current Page When Using <Base>
What Happens When Localstorage Is Full
Textarea Value Not Getting Posted with Form
How to Have Quotation Marks in HTML Input Values
Closing Svg Tags, Explicit or Self Closing
What Happens If The Action Field in a <Form> Has Parameters
Is It Correct to Use Single Quotes for HTML Attributes
CSS Layout 2-Column Fixed-Fluid
While Display Image Crop Top and Bottom of Image Using CSS
CSS Overflow Hidden with Absolute Position
How to Show an Animation That Is Hidden Behind a Colored Div Using a "Reveal" Div on The Surface