How to set height of DIV with CSS in relative positioning?
I have some HTML+CSS code that wants to layout several div
s. The layout is like this: all div
s stay in a parent div
whose size is fixed. Then each child div
should stay on its own line, and use the minimum height for drawing its content. The last div
should consume all remaining height, so that the parent div
is entirely filled.
This code shows my approach using CSS float
and clear
properties:
<html>
<head>
<style>
.container {
width: 500px;
height: 500px;
border: 3px solid black;
}
.top {
background-color: yellow;
float: left;
clear: left;
width: 100%;
}
.bottom {
background-color: blue;
height: 100%;
float: left;
clear: left;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>
<div class="top">top4</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
However, the last div
overflows from the its parent. I guess it is because of the width: 100%
.
Is there any way to solve this problem? I want to avoid setting the overflow
attribute of the parent, and also I have to avoid using absolute pos开发者_JS百科itioning. If somehow I could trick the last div
to use the height of the parent minus the sum of height of the other div
s.
Add:
div.container { overflow: hidden; }
It's not overflowing because it's 100% width. It's overflowing because it's a float and thus removed from the normal layout. Changing the overflow property will change how the browser caters for contained floats.
Oh and if you aren't already, make sure you're using a DOCTYPE. It particularly matters for IE.
精彩评论