Question

我一直在努力争取使用CSS和DIVS页面。基本上我需要一个顶部带有徽标/横幅广告的标头广告，然后是三栏布局（导航，主要内容和其他附加内容），然后用页脚结束页面。

我需要设置背景颜色并在三个内容列周围放置一个1 px边框，这样我就有了一个包装器div。三列也可能还需要自己的背景颜色。

我的目标是让三个内容列中的每一列具有相同的高度并根据需要增长。但是，如果我向其中一个添加了大量内容，则内容会在页脚下方溢出。我已经对此进行了大量搜索并尝试了高度和最小高度的各种组合，但仍无法使其正常工作。

我在http://solomon.ie/so放置了HTML（包含CSS），在WinXP上放置了FF3中的屏幕抓取

整理的代码也在这里：

<!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>

Answer 1

尝试http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

我已经在各种项目中使用过它，效果非常好。

Answer 2

没有错，内容包装器是屏幕的100%，但你有其他元素（顶部，底部）。这意味着100% + n px。

删除页眉和页脚，您将自己查看。您应该将所有内容都包装在div中，并将高度设置为100%和overflow:hidden，但这很危险。

您还需要在顶部添加此规则，因为默认情况下，某些元素（如body）会有边距/填充。

*{margin:0;padding:0;}

请注意，边框会将高度/宽度添加到整体高度/宽度，因此即使边框为1px，您也始终会进行垂直滚动，即100% + 1px

enter image description here

将div设置为100％高度，但内容在div的末尾下方流动

2 个答案: