Question

我已经构建了一个模板，但是页脚div不能完全位于所有其他div之下。

源代码可以在这里找到： http://businesstrends.co.il/learn/question.php

这是源代码，因为页面出现故障：

<div id="content">
    Content
</div>

<div id="sidebar">
    Sidebar
</div><br>

<div id="footer">
    Footer
</div>

CSS：

#head {
    width: 1200px;
    background-color: #fff;
    height: 75px;
    margin-left: auto;
    margin-right: auto;
}

#content {
    margin-top: 15px;
    background-color: #fff;
    width: 890px;
    float: left;
    border: 1px solid #b7b7b7;
}

#sidebar {
    margin-top: 15px;
    background-color: #fff;
    width: 300px;
    float: right;
    border: 1px solid #b7b7b7;
}

#footer {
    background-color: #fff;
    width: 1200px;
    height: 75px;
    border: 1px solid #b7b7b7;
    margin-top: 15px;
    position: absolute;
    clear: both;
}

Answer 1

要实现它，您的页面结构需要看起来像那样

HTML

<html>
<body>
     <div class="content">

     <!-- all your page content goes here with header -->


           <div class="stop"></div>
     </div>

     <div class="footer">
     </div>
</body>
</html>

CSS

    html{height:100%}
    body{height:100%;margin:0}
    .content{height:auto !important;min-height:100%}

   .stop{height:40px;clear:both}
   .footer{width:100%;height:40px;background-color:red;margin-top:-40px}

.stop元素会阻止页脚重叠您的内容，也需要设置为页脚的高度。

.footer需要有负余量等于其高度。

页脚将始终位于页面底部

http://jsfiddle.net/Du94N/1/

Answer 2

尝试开始：P

#footer {
background-color: #fff;
width: 1200px;
height: 75px;
border: 1px solid #b7b7b7;
margin-top: 15px;
position: absolute;
bottom: 0px;
}

Answer 3

试试这个:)

#footer {
    background-color: #fff;
    width: 1200px;
    height: 75px;
    border: 1px solid #b7b7b7;
    margin-top: 15px;
    float: left;
    }

Answer 4

您可以尝试将页脚浮动到左侧，将其放在所有div下

#footer {
    float:left;
}

希望有所帮助

Answer 5

我不确定你在问什么，但这有什么帮助吗？

#footer {
    background-color:#fff;
    width:1200px;
    height:75px;
    border: 1px solid #b7b7b7;
    position:absolute;
    bottom:0px;
}


<div id="footer">
Text here
</div>

Answer 6

只需添加clear:both:即可。顺便说一句，你的头衔，链接和元属于头部，而不是身体。

FOOTER div不会在底部并克服另一个div

6 个答案: