Forum Moderators: not2easy
I need to DIV's bottom staying at bottom of my page on small content, and strech normally on big content amount.
I use min-height for this(for exmaple to stick footer, or to hold bottom positioned backgrounds). It works fine. But i do not know how to achieve same behaviour for the child div's(for applying many semi-transparent backgrounds).
How to do this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>code example</title>
<style type="text/css">
body,html{
margin: 0px;
padding: 0px;
height: 100%;
}
div#wrpDiv1{
min-height: 100%;
background: deeppink;
}
div#wrpDiv2{
min-height: 100%;
background: royalblue;
}
div#wrpDiv3{
min-height: 100%;
background: firebrick;
}
</style>
</head>
<body>
<div id="wrpDiv1">
<div id="wrpDiv2">
<div id="wrpDiv3">
something
<!--
very long content <br/>...
-->
</div>
</div>
</div>
</body>
</html>
Thanks for all!
FWIW: IE6 and translucent PNGs as repeating background is anyways a no go, even usign the non standard filters.
