Set a div to 100% height but content is flowing below end of div_问答_开发者

Set a div to 100% height but content is flowing below end of div

开发者 https://www.devze.com 2023-02-21 19:02 出处：网络

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

相关专题：css

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.