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>
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 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;
}
CSS: How to make div fill remaining height inside of a flex-child
It would be more helpful when you would of provided your existing CSS to better understand what you are trying to do. However I hope the example below will help you figure out how to solve what you are trying to accomplish.
Html:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"> auto div</div>
<div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
</div>
</div>
CSS:
.flex-parent-row {
display: flex;
flex-direction: column;
height: 200px;
width: 500px;
border: 1px solid #000;
}
.flex-child {
border: 1px solid #000;
background-color: red;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.auto-height {
background: orange;
}
.i-want-this-one-to-fill-remaining-height {
flex-grow: 1;
background-color: lightblue;
}
If you need additional help please provide more code.
Fill remaining div height with image
Please define the background settings in order. That was the issue, your CSS itself works fine, I made one small change, I set margins for body
and html
tag to 0, this removed the scrollbar, you can either use this change or leave it.
Check my below DEMO.
JSFiddle Demo
CSS:
html, body { height: 100%;margin:0px; }
section {
display: flex;
flex-flow: column;
height: 100%;
}
header {
background: tomato;
}
div {
flex: 2 ;
background: gold;
overflow: auto;
background: url('http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg') no-repeat;
background-size: auto 100%;
background-position: center center;
}
footer {
background: lightgreen;
min-height: 60px;
}
Related Topics
How to Add Background Image for Input Type="Button"
Possible to Style the CSS3 Resize Function
Html5 Video Not Working in Ie 11
Internet Explorer 11 Word Wrap Is Not Working
Is There a Disadvantage of Using 'Display:Table-Cell'On Divs
Chrome Could Play HTML5 Mp4 Video But HTML5Test Said Chrome Did Not Support Mp4 Video Codec
Html.Dropdownlistfor() with Custom Parameter
How to Use Multiple Itemprops in a Span Tag for Schema.Org Rich Snippets
How to Make a Sticky Footer Using Flexbox in Ie11
Change Background Image Opacity
How to Stop the Browser from Url-Encoding Form Values on Get
Height of Flex Container Not Working Properly in Safari
How to Change the Font-Size of an <Option> Element Within <Select>
Get Input Type=Text to Look Like Type=Password
Play Infinitely Looping Video On-Load in HTML5
How to Save the Content in Uiwebview for Faster Loading on Next Launch