How to combine a relative top with an absolute bottom in CSS?
- by ceving
I need to define a div which must stay with the top at the normal position, which differs from the top of the surrounding element:
position:relative
top:0
and which grows in the height up to the size of the surrounding element:
position:absolute
bottom:0
I have no idea how to combine the both. Whenever I use a relative box I loose the absolute bottom and whenever I use an absolute box I loose the relative top.
Can anybody help me how to do this in CSS?
Here is an example:
<html>
<head>
</head>
<style type="text/css">
@media screen {
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#head {
background-color: gray;
}
#rel {
background-color: green;
position: relative;
top: 0;
bottom: 0;
float: left;
}
#abs {
background-color: red;
position: absolute;
top: 0;
bottom: 0;
float: left;
}
}
</style>
<body>
<div id="head">
<h1>Head</h1>
</div>
<div id="abs">
<h2>absolute</h2>
</div>
<div id="rel">
<h2>relative</h2>
</div>
</body>
</html>
"relative" does not grow at all and "absolute" grows too much.
