Question

我确定这与定位有关但我无法解决问题。页面末尾的正文和页脚相互叠加。如何使身体液体不会与页脚重叠？

由于

JSFIDDLE就在这里。

CSS

*
{
    margin: 0px;
    padding: 0px;
}
div
{
    display: block;
}

/* --- BODY ------------------------------------------------ */
#body_block
{
    float: left;
    width: 100%;
    background: #EEEEEE;
    /*background-image: url('../images/bg3.jpg');*/
}
#body
{
    margin: 0 auto;
    position: relative;
    width: 900px;
    /*background: #BB0099;*/
}
#body_title
{
    position: absolute;
    top: 15px;
    left: 0px;
    width: 200px;
    /*height: 24px;*/
    background: #aa99ff;
}
#body_search
{
    position: absolute;
    top: 15px;
    right: 0px;
    width: 200px;
    /*height: 24px;*/
    background: #aa99ff;
}
#body_content
{
    position: relative;
    top: 50px;
    left: 0px;
    width: 900px;
    /*height: 24px;*/
    background: #aa99ff;
}

/* --- FOOTER ---------------------------------------------- */
#footer_block
{
    float: left;
    width: 100%;
    /*background: #DDDDDD;*/
}
#footer
{
    margin: 0 auto;
    position: relative;
    width: 900px;
    padding: 15px 0px 15px 0px;
    /*background: #CC0011;*/
}

HTML

<body>

    <div id="body_block">
        <div id="body">
            <div id="body_title"><h1>Home</h1></div>
            <div id="body_search"><h1>Search</h1></div>
            <div id="body_content">
                TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM
            </div>
        </div>
    </div>

    <div id="footer_block">
        <div id="footer">FOOTER</div>
    </div>

</body>

Answer 1

正如@DavidMillar所说，清除页脚上的浮动将解决重叠问题。但是，我怀疑你可以通过使用一些预期的设计元素来直接实现你想要的设计。

* {
    margin: 0px;
    padding: 0px;
}

#body {
    background: #EEEEEE;
    margin: 0 auto;
    position: relative;
    width: 900px;
    /*background: #BB0099;*/
}

#body_title {
    float: left;
    width: 200px;
    /*height: 24px;*/
    background: #1199ff;
}

#body_search {
    float: right;
    width: 200px;
    /*height: 24px;*/
    background: #aa11ee;
}

#body_content {
    clear: both;
    width: 900px;
    /*height: 24px;*/
    background: #aa99ff;
}

#footer {
    width: 900px;
    padding: 15px 0px 15px 0px;
    background: #CC0011;
}

总结：

div默认为阻止，无需指定
在*上设置margin / padding = 0会将所有元素应用于：无需单独重新应用。
#body_title和#body_search可左/右浮动，以便将它们保存在您想要的位置。
需要清除#body_content上的两个浮点数，以便它返回到文档流程
除非您计划移动元素，否则无需添加position: relative。现在一切都在文档流程中（除了顶部的两个浮点数），无需定位它们。

我还从主体和页脚中删除了包装，因为我认为它们是不必要的，但您可以轻松地将它们添加回来。：）

查看新小提琴：http://jsfiddle.net/dR82X/

Answer 2

如果您实施“粘性页脚”解决方案中的代码，您也将解决自己的问题。

这是粘性页脚的说明，以及如何解决它：http://ryanfait.com/sticky-footer/

此外：

CSS Only solution
CSS Tricks' solution

Answer 3

只显示页脚与正文重叠，因为您已将内容放置在正文中，使其与原始位置相差50px。（例如position:relative;top:50px;）

虽然页脚实际上并没有与内容重叠，但您可以通过将clear:both;添加到页脚CSS来确保它从正文下方开始，这样它就会在绘制之前清除以前浮动的元素。

Answer 4

因此，有很多方法可以获得所需的布局。这是最简单的，使用浮动之一。向左浮动会将项目堆叠在容器的左边缘上，向右浮动会将它们堆叠在右侧（注意，它们将彼此相邻堆叠，直到它们用完空间，然后开始堆叠在该行下方，这例如，你可以堆叠一个彼此相邻的链接菜单。使用clear会导致元素在包含元素内的任何浮动元素下方推送。所以你可以向左，向右浮动一个链接，然后清除它们下面的内容。

如果你想绝对

小提琴：http://jsfiddle.net/mBwP8/1/

代码：

/* --- GENERAL --------------------------------------------- */
* {
    margin: 0px;
    padding: 0px;
}

/* --- BODY ------------------------------------------------ */
#body_block {
    background: #EEEEEE;
}
#body {
    margin: 0 auto;
    position: relative;
    width: 900px;
    padding-top: 15px;
}
#body_title {
    float: left;
    width: 200px;
    background: #1199ff;
}
#body_search {
    float: right;
    width: 200px;
    background: #aa11ee;
}
#body_content {
    clear: both;
    width: 900px;
    background: #aa99ff;
}

/* --- FOOTER ---------------------------------------------- */
#footer_block {
    float: left;
    width: 100%;
}
#footer {
    margin: 0 auto;
    width: 900px;
    padding: 15px 0px 15px 0px;
    background: #CC0011;
}

如果您希望绝对定位顶部链接，您可以执行以下操作，但这不是必需的。阅读css浮点数并定位相对和绝对值。它们可能很难获得，但是一旦你这样做就会爱上它！

小提琴：http://jsfiddle.net/ZRwqH/

代码：

/* --- GENERAL --------------------------------------------- */
* {
    margin: 0px;
    padding: 0px;
}

/* --- BODY ------------------------------------------------ */
#body_block {
    background: #EEEEEE;
}
#body {
    margin: 0 auto;
    position: relative; /* now we need relative here, so the *absolute positioning* of the header is *relative* to this element */
    width: 900px;
    padding-top: 55px; /* and we need to pad this because absolute positioning takes the header out of the document flow */
}
#body_header {
    position: absolute; /* taking this out of the document flow, but pushing it to the top of the (relative) container */
    top: 0;
    left: 0;
    width: 100%; /* abs positioning causing width to collapse, 100% pushes it back out to the full width of the (relative) container */
    padding-top: 15px; /* the extra space at the top */
}
#body_header > div { /* to make all the "menu" links the same dimensions */
    width: 200px;
    height: 40px;
}
 /* we can now float *inside* of the abs positioned header, note that the header element will collapse 
    to zero + padding height unless you take steps to clear or contain these floats, but since the header
    isn't needed for border or background color we don't care in this case. */
#body_title {
    float: left;
    background: #1199ff;
}
#body_search {
    float: right;
    background: #aa11ee;
}
#body_content {
    clear: both;
    width: 900px;
    background: #aa99ff;
}

/* --- FOOTER ---------------------------------------------- */
#footer_block {
    width: 100%;
}
#footer {
    margin: 0 auto;
    width: 900px;
    padding: 15px 0px 15px 0px;
    background: #CC0011;
}

定位导致身体与页脚重叠

4 个答案: