我的 CSS 有问题，2 列布局中的右侧列超出了页脚。
我试过使用 clear: both; 属性，但我无法让它工作..
[图片已过期]
第二列的 ID 为 column2，两列都使用 column 类。页脚 html 的 ID 为 footerWrapper
列和页脚都是div标签。
我的 CSS(删节版):
.column {
width: 49%;
}
#column2 {
width: 50%;
position: absolute;
top: 0px;
margin-left: 50%;
float: left;
}
#footerWrapper {
background-color: #333333;
border-top: 2px #FF6600 solid;
color: #666;
}
HTML 删节:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainColumns">
<div id="mainContainer"><div class="mainWrapper">
<h1>Title</h2>
</div>
<!-- start panels -->
<div class="panels">
<div class="column">
<h2><img src="../lib/icons/newspaper.png" width="16" height="16">Title</h2>
<div>
<p>content</p>
</div>
<p></p>
<h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2>
<div>
<p>content</p>
</div>
<p></p>
<h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2>
<div>
<p>content</p>
</div>
</div>
<div class="column" id="column2">
<h2><img src="../lib/icons/newspaper.png" width="16" height="16">Title</h2>
<div>
<p>content</p>
</div>
<p></p>
<h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2>
<div>
<p>content</p>
</div>
<p></p>
<h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2>
<div>
<p>content</p>
</div>
</div>
</div>
<!-- end panels -->
<div class="mainWrapper"></p>
</div></div>
<div id="sideBar"> </div>
</div>
<div id="footerWrapper">
<div id="footer">
<h6></h6>
</div>
</div>
</body>
</html>
最佳答案
- float 两列
- 从#column2 中删除位置、顶部和左边距
- 将 clearfix CSS 添加到您的样式表
- 将“clearfix”类添加到您的面板 div
Clearfix 使面板 div 包裹两列，导致与最长的列一样高。
关于html - 延伸到页脚的 CSS float 列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2687592/