I search for a CSS solution for the following problem. Inside a container we have two blocks, vertically aligned so, that they fill the the whole area of the container, do not overlap and as the bottom one enlarges, the top one shrinks (without stretching out of container size).
Consider we start with the layout created by code below (go see it in browser). The following two requirements must be met:
When the size of the
.boxis changed,.topand.bottomtogether fill the whole area of it, but the height of the.bottomremains fixed.When the height of
.bottomis changed, the.top's height is changed; the.boxis not affected.
So, I want the whole this box-model to be controlled (e.g. modified by JavaScript) by only .box's width/height and .bottoms's height, all the rest is adjusted by CSS automatically.
The code (it is far away from solution and I know it can be done with little JavaScript, but let's find a pure CSS solution):
<html>
<head>
<style>
.box {
position:fixed;
top:20px;
left:20px;
width:200px; /* these adjust the whole box size,*/
height:320px; /* children cannot stretch out of these limits*/
background:silver;
}
.top {
clear:left;
height:280px; /* we want it to be like '100%-bottom's height'!*/
margin: 3px;
background: white;
border: red 1px solid;
}
.bottom {
position:absolute;
bottom:0;
//top:0;
left:0;
right:0;
margin: 3px;
height: 27px; /* this adjusts how top & bottom are sized inside the box*/
background: white;
border: blue 1px solid;
}
</style>
</head>
<body>
<div class="box">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</body>
</html>