I got a container div containing three child divs (vary in content) - each as tall as the tallest one. I managed this by setting the container to display:table and the child divs to display:table-cell etc.
Everything worked just fine, until...
I inserted a new div inside one of the child divs and tried to make it height:100% - so it would stretch to the same height as its parents, but that did not work.
Please see my JSFiddle: http://jsfiddle.net/bkG5A/
Any help would be greatly appreciated!
HTML
<div class="container">
<div class="child">
a<br />a<br />a
</div>
<div class="child">
a<br />a<br />a<br />a<br />a<br />a<br />a
</div>
<div class="child">
<div class="content">
a<br />a<br />a
</div>
</div>
</div>
CSS
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
height: 100%;
background-color: blue;
}
This question is related to
css
html
multiple-columns
You can use this CSS:
.content {
height: 100%;
display: inline-table;
background-color: blue;
}
You have to set the height for the parents (container and child) explicitly, here is another work-around (if you don't want to set that height explicitly):
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
position:relative;
}
.content {
position:absolute;
top:0;
bottom:0;
width:100%;
background-color: blue;
}
The child can only take a height if the parent has one already set. See this exaple : Vertical Scrolling 100% height
html, body {
height: 100%;
margin: 0;
}
.header{
height: 10%;
background-color: #a8d6fe;
}
.middle {
background-color: #eba5a3;
min-height: 80%;
}
.footer {
height: 10%;
background-color: #faf2cc;
}
$(function() {_x000D_
$('a[href*="#nav-"]').click(function() {_x000D_
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {_x000D_
var target = $(this.hash);_x000D_
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');_x000D_
if (target.length) {_x000D_
$('html, body').animate({_x000D_
scrollTop: target.offset().top_x000D_
}, 500);_x000D_
return false;_x000D_
}_x000D_
}_x000D_
});_x000D_
});html,_x000D_
body {_x000D_
height: 100%;_x000D_
margin: 0;_x000D_
}_x000D_
.header {_x000D_
height: 100%;_x000D_
background-color: #a8d6fe;_x000D_
}_x000D_
.middle {_x000D_
background-color: #eba5a3;_x000D_
min-height: 100%;_x000D_
}_x000D_
.footer {_x000D_
height: 100%;_x000D_
background-color: #faf2cc;_x000D_
}_x000D_
nav {_x000D_
position: fixed;_x000D_
top: 10px;_x000D_
left: 0px;_x000D_
}_x000D_
nav li {_x000D_
display: inline-block;_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<body>_x000D_
<nav>_x000D_
<ul>_x000D_
<li>_x000D_
<a href="#nav-a">got to a</a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#nav-b">got to b</a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#nav-c">got to c</a>_x000D_
</li>_x000D_
</ul>_x000D_
</nav>_x000D_
<div class="header" id="nav-a">_x000D_
_x000D_
</div>_x000D_
<div class="middle" id="nav-b">_x000D_
_x000D_
</div>_x000D_
<div class="footer" id="nav-c">_x000D_
_x000D_
</div>Source: Stackoverflow.com