Set a div to 100% height but content is flowing below end of div
I've been struggling for days trying to get a page working with CSS and DIVS. Basically I need a masthead with logo/banner ad at the top, then a three column layout (nav, main content and additional side content), then ending the page with a footer.
I will need to set a background color and put a 1 px border around the three content columns so I have a wrapper div around them. And the three columns may also need there own background colors too.
What I am aiming for is to have each of the three content columns be the same height and grow as required. However, if I add a lot of content to one of them, the content spills out below the footer. I've done lots of searches on this and tried various combinations of height and min-height but stil开发者_如何学运维l can't get it working.
I have placed HTML (with the CSS in it) at http://solomon.ie/so and screen grabs taken in FF3 on WinXP
The tidied code is also here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body {
height:100%;
}
body, td, p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
#content_wrapper{
width: 980px;
margin: 0 auto;
border:1px solid #3300FF;
background:#FFFF66;
min-height:100%;
height:100%;
}
#middlecol{
float:left;
min-height:100%;
height:100%;
background:grey;
width:540px;
}
#leftcol{
float:left;
min-height:100%;
background:green;
width:170px;
}
#rightcol{
float:right;
min-height:100%;
background:#66FFCC;
width:250px;
}
#header_wrapper {
width: 980px;
margin: 0 auto;
border:1px solid #FF0000;
clear:both;
margin-bottom:8px;
}
#footer_wrapper {
width: 980px;
margin: 0 auto;
border:1px solid #000000;
clear:both;
margin-top:8px;
}
</style>
<title>test </title>
</head>
<body>
<div id="header_wrapper"><h1>logo/ad</h1></div>
<div id="content_wrapper">
<div id="rightcol"><h1>RHS column</h1></div>
<div id="leftcol"><h1>LHS</h1></div>
<div id="middlecol"><h1>Main content column</h1></div>
</div>
<div id="footer_wrapper"><h1>footer</h1></div>
</body>
</html>
Try http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
i've used it on various projects and it works extremely well.
There is nothing wrong, content wrapper is 100% of screen, but you have other elements (top, bottom). That means 100% + n px.
Remove header and footer, and you will see for yourself. You should wrap everything in a div, and set height to 100% and overflow:hidden, but this is dangerous.
You also need to add this rule on top, because some elements like body have margin/padding by default.
*{margin:0;padding:0;}
Note that borders add height/width to overall height/width so you will always have vertical scroll even if the border is 1px, thats 100% + 1px
加载中,请稍侯......
精彩评论