CSS, Stretching Vertically Div Until It Reach The Height of Its Parent

CSS, Stretching vertically div until it reach the height of its parent

Here is one way of doing it.

Apply the following CSS:

html, body{ height: 100%; margin: 0;}
body{ background-color: #e3e3e3;}

#pagewrapper{
    margin: 0 auto;
    position: relative;
    width: 600px;
    height: 100%;
}
header{ 
    display:block;
    width: 100%;
    height: 100px;
    background: yellow;
}
#contentwrapper{
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    background: blue;
}
#navwrapper{
    width: 100%;
    position: absolute;
    height: 100px;
    bottom: 0px;
    left: 0;
    background: green;
}

Since you specified heights for the header and #navwrapper block elements,
you can use absolute positioning with respect to the parent #pagewrapper block
to set the bottom and top offsets for #contentwrapper and the bottom offset for
#navwrapper.

If you see a scroll bar, you may need to set margin: 0 for either the html and/or body tags.

Demo fiddle: http://jsfiddle.net/audetwebdesign/yUs6r/

CSS stretch div vertically to fill remaining container

Set the parent to flex with #slider set to flex-grow: 1 (or flex: 1 0 0 for short)

section {  position: absolute;  top: 0;  left: 0;  height: 100%;  width: 400px;  background: green;  display: flex;  flex-direction: column;}
#slider {  flex: 1 0 0;}
img {  width: 100%;  height: 100%;  vertical-align: top;}

<section>  <header style="height:40px; background: yellow;">header</header>  <div id="slider">    <img src="http://amanita-design.net/img/home-news/botanicula.jpg" />  </div></section>

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

CSS: Stretch Div to 100% of its parent's height with margin/padding

Make the yellow div absolutely positioned, relative to the container. By setting both the top and bottom without specifying a height, the div will get the height of the container.

div.background-mid {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0px;
    right: 0px;
    background-color: yellow;
}

Stretch child div height to fill parent that has dynamic height

The solution is to use display: table-cell to bring those elements inline instead of using display: inline-block or float: left.

div#container {  padding: 20px;  background: #F1F1F1}.content {  width: 150px;  background: #ddd;  padding: 10px;  display: table-cell;  vertical-align: top;}.text {  font-family: 12px Tahoma, Geneva, sans-serif;  color: #555;}

<div id="container">  <div class="content">    <h1>Title 1</h1>
    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.      <br>Sample Text. Sample Text. Sample Text.      <br>Sample Text.      <br>    </div>  </div>  <div class="content">    <h1>Title 2</h1>
    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>  </div></div>

How to make a parent div stretch according to it's child's content?

This is a solution that can work. You can play around with it but this gets the job done for me when I want cells to have the same height as eachother even with variable heights and contents.

Take a look : fiddle

CSS

div.content {
    display: table;
}
div.box {
    width: 300px;
    display: table-cell;
    vertical-align: top;
    background: #ccc;
    margin: 10px
}

One last change. You can use the Flex instead of table.
http://jsfiddle.net/cornelas/5rRhp/2/

div.content {
    display: flex;
}
div.box {
    width: 300px;
    vertical-align: top;
    background: #ccc;
    margin: 10px
}

CSS, Stretching Vertically Div Until It Reach The Height of Its Parent