Question

我无法获取<div id="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">。

Answer 1

你已经在你的包装器中浮动了需要清除的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>

使包装器向下推动页脚

1 个答案: