我在获取 <div id="wrapper">
中的元素时遇到问题压低我的页脚。此刻 wrapper 流入页脚。我该如何解决?
这是我的 HTML:
<div id="header">
</div>
<div id="wrapper">
<div id="findcontent">
<div id="criteriabar">
</div>
<div id="searchresults">
</div>
</div>
</div>
<div id="footer">
</div>
使用以下 CSS:
#header {
position: relative;
display: block;
height:65px;
}
#wrapper {
right: 0;
left: 0;
position: relative;
padding: 0;
}
#findcontent {
position: relative;
min-width: 960px;
min-height: 400px;
margin: 0 20px;
}
#criteriabar {
position: relative;
float: left;
width: 190px;
border-right: 1px solid #CCC;
height: 100%;
padding-right: 20px;
left: 30px;
top: 30px;
}
#searchresults {
position: relative;
width: 770px;
left: 40px;
right: 10px;
top: 30px;
}
#footer {
display: block;
zoom: 1;
position: relative;
overflow: hidden;
border-top: solid 1px #CCD9FF;
margin: 20px 0px 10px;
}
更新:添加class="clearfix"
单独没有这样做。我还必须更改 top
至 margin-top
用于 <div id="find content">
内的 float 元素.
最佳答案
您的包装器内有 float div,需要清除。您有两个选择:
选项 1:
#wrapper {
right: 0;
left: 0;
position: relative;
padding: 0;
overflow:hidden; /* This guy */
}
选项 2:
//CSS
.clear {
clear: both;
}
//HTML
<div id="wrapper">
<div id="findcontent">
<div id="criteriabar">
</div>
<div id="searchresults">
</div>
</div>
<div class="clear"></div>
关于html - 让包装器将页脚向下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7911491/