Css 将div设置为100%高度，但内容在div末尾下方流动_Css

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

css

Css 将div设置为100%高度，但内容在div末尾下方流动,css,Css,几天来，我一直在努力让页面使用CSS和div。基本上，我需要一个顶部带有徽标/横幅广告的报头，然后是一个三列布局的导航、主要内容和附加的侧边内容，然后以页脚结束页面我将需要设置一个背景色，并在三个内容列周围放置一个1像素的边框，以便在它们周围有一个包装div。而且这三列可能也需要有自己的背景色我的目标是使三个内容栏的高度相同，并根据需要增长。但是，如果我在其中一个页面上添加了大量内容，内容就会溢出到页脚下面。我在这方面做了很多搜索，尝试了各种高度和最小高度的组合，但仍然无法让它工作我已经把

几天来，我一直在努力让页面使用CSS和div。基本上，我需要一个顶部带有徽标/横幅广告的报头，然后是一个三列布局的导航、主要内容和附加的侧边内容，然后以页脚结束页面

我将需要设置一个背景色，并在三个内容列周围放置一个1像素的边框，以便在它们周围有一个包装div。而且这三列可能也需要有自己的背景色

我的目标是使三个内容栏的高度相同，并根据需要增长。但是，如果我在其中一个页面上添加了大量内容，内容就会溢出到页脚下面。我在这方面做了很多搜索，尝试了各种高度和最小高度的组合，但仍然无法让它工作

我已经把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>

试一试

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

没有问题，内容包装器在屏幕上占了100%，但在顶部和底部都有其他元素。这意味着100%+n px

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

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

*{margin:0;padding:0;}

请注意，边框将高度/宽度添加到总高度/宽度，因此即使边框为1px，也始终具有垂直滚动，即100%+1px

感谢Dustin Laine修复了我的代码引用，我正试图找出答案！嗨，谢谢。我只是尝试删除页眉和页脚，结果相同。我了解边界。虽然中间的列将有一个，但头/脚上的边框只是一个临时的东西，以查看发生了什么。嗨，马克，这似乎需要内容向左或向右浮动-如果我需要它居中并达到特定宽度980，它会工作吗？你应该能够将列所在的容器居中。