Make nested div stretch to 100% of remaining container div height
I have spent way too much time trying to figure it out, but by George I've got it!
The "Eureka" moment was reading other questions where people were asking "how can I do it without using tables?" Because of course this layout is easy with tables. But that made me think of display:table
.
As this blog post nicely argues, using display:table
gives you table layouts without the nasty mark-up overhead as HTML table layouts, allowing you to have semantic code and different layouts for different media queries.
I did end up having to make one change to the mark-up: a wrapper <div>
around the image. Also, max/min heights are all weird when dealing with table displays: height
settings are treated as preferred heights given the constraints of parent and child elements. So setting a height of zero on a display:table-row
wrapper div made that row fit to the content image exactly. Setting a height of 100% on the content div made it nicely fill the space in between the image and the minimum height of the parent container.
Voila!
Condensing just the essential code:
body {
overflow-y: scroll;
overflow-x: hidden;
}
body,
html {
height: 100%;
}
.container {
display: table;
width: 100% height: 100%;
/* this will be treated as a Minimum! It will stretch to fit content */
}
div.wrapper {
display: table-row;
height: 0px;
/* take as little as possible, while still fitting content */
}
img {
display: table-cell;
width: 100%;
/*scale to fit*/
}
.bottom {
display: table-cell;
height: 100%;
/* take as much as possible */
}
<div class="container">
<div class="wrapper">
<img src="http://placekitten.com/600/250" />
</div>
<div class="bottom" contentEditable="true">
</div>
stretching inner div to full height of screen and content with overflow
At the moment the height of the container for the 1 million "contents" .contentcolumn
is set to exactly match that of the flex item parent <div class="c2 content">
with the help of height: 100%;
.
Naturally, the background(-color) of .contentcolumn
will just affect the overflowing items up to this height and won't "follow" the vertically overflowing text content.
By setting the height definition of .contentcolumn
to min-height, that text container:
- will overflow in accordance with his text contents height,
- will always have at least the height of his parent flex item
.contentcolumn {
width: 100%;
max-width: 300px;
margin: auto;
// height: 100%;
min-height: 100%; <= swapped height with min-height the height property of that container to make it fully cover its text content vertically
}
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 nested div height 100%
Solved:
#container {
background: #FFFFFF;
padding: 10px 50px 0;
height: 100%;
width:780px;
position:absolute;
}
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>
Related Topics
Detect If a Browser in a Mobile Device (Ios/Android Phone/Tablet) Is Used
How to Add Fonts to Create-React-App Based Projects
How to Style the Html5 Form Validation Error Messages With Css
How to Center Floated Elements
Bootstrap Dropdown Sub Menu Missing
Customizing Bootstrap CSS Template
How to Identify Unused CSS Definitions from Multiple CSS Files in a Project
How to Center Align Horizontal ≪Ul≫ Menu
Black Transparent Overlay on Image Hover With Only Css
Bootstrap Take Full Width for Select Drop Down
How to Make Fixed Header Table Inside Scrollable Div
How to Combine a Background-Image and Css3 Gradient on the Same Element
Select Every Nth Element in Css
Reset CSS Display Property to Default Value
How to Style Child Components from Parent Component'S CSS File