我刚开始使用 CSS，一直在阅读教程和查看示例代码。现在，我正在使用人造列方法 as described by Keith Donegan at Code-Sucks.com和粘性页脚解决方案 as described by Steve Hatcher .
我已经阅读了此处已发布的关于将 div 标记扩展到页面底部的类似问题，但它们似乎对我不起作用。我已将所有包含的 css 类中的高度和最小高度设置为 100%，但它似乎不起作用。
此外，当前代码存在一个问题，即当我的“包装器”插入页脚时没有边距。我想要一个不错的 5px 边距，但它完全消失了。
下面是我的 CSS。为了便于阅读，我删除了很多评论和致谢。
* {margin:0;padding:0;}
html {height: 100%;}
body {
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: auto;
width: 922px;
height: 100%;
}
#main {overflow:auto;
padding-bottom:155px; /* must be same height as the footer */
}
#faux {
background: #CCCCCC;
margin-bottom: 5px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
width: 100%
min-height:100%;
}
#header {
color: #333;
width: 902px;
padding: 10px;
height: 100px;
margin: 0px 0px 5px 0px;
background: #ABBEBE;
position: relative;
}
#leftcolumn {
display: inline;
color: #333;
margin: 10px;
padding: 0px;
width: 195px;
float: left;
min-height: 100%;
}
#rightcolumn {
float: right;
color: #333;
margin: 10px;
padding: 0px;
width: 683px;
display: inline;
position: relative;
min-height: 100%;
}
#footer {position: relative;
margin: 5px auto;
width: 902px;
margin-top: -155px; /* negative value of footer height */
height: 130px;
clear:both;
background: #ABBEBE;
color: #333;
padding: 10px;
}
#.clear { clear: both; background: none; }
我的html如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Faux Column CSS Layouts - 2 Column - faux-1-2-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<div id="main">
<!-- Begin Header -->
<div id="header">
This is the Header
</div>
<!-- End Header -->
<!-- Begin Faux Columns -->
<div id="faux">
<!-- Begin Left Column -->
<div id="leftcolumn">
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<h1>Faux Column CSS Layouts</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<div class="clear"></div>
</div>
<!-- End Right Column -->
<div class="clear"></div>
</div>
<!-- End Faux Columns -->
</div>
</div>
<!-- End Wrapper -->
<!-- Begin Footer -->
<div id="footer">
This is the Footer
</div>
<!-- End Footer -->
</body>
</html>
如有任何帮助，我们将不胜感激。
最佳答案
这应该可以解决您的问题
#main {
overflow:hidden;
height: 100%;
}
#faux {
background: #CCCCCC;
margin-bottom: 5px;
overflow: auto;
width: 100%; /* <<-- you have forgot the ; at the end */
min-height:100%;
}
关于html - 将人造列向下扩展到粘性页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7005186/