CSS: Bottom block resize forces top block to shrink (inside a fixed-size container)
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>
开发者_JS百科.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>
I don't see any reason why do you want to do this and no control the height with the .top .bottom themselves.
with this code the height is depends on the text inside the divs.
<html>
<head>
<style>
.box {
border:1px solid #583454;
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 {
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>
I think you simply have to change:
.top {
height:280px;
}
to:
.top {
height:100%;
}
Then, if you adjust the height of "box", the height of "top" adjusts to fill the extra space while the height of "bottom" stays the same. And when you change the height of "bottom", the height of "top" adjusts to fill the space but the height of "box" stays the same.
Does that solve your problem?
加载中,请稍侯......
精彩评论