页脚Div不会在底部并越过另一个Divs

我已经构建了一个模板

可以在此处找到源代码：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;
}

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

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}

。停机元素将防止页脚重叠您的内容，还需要设置为页脚的高度。

.FOOTER需要减去余量等于其高度。

页脚将始终留在页面的底部

http://jsfiddle.net/du94n/1/

尝试以下时间：p

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

尝试这个:)

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

您可以尝试将页脚浮在左侧，这应该将其放在所有Divs

下

#footer {
    float:left;
}

希望有帮助

我不确定您在问什么，但这是对任何帮助吗？

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

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

只需添加clear:both:即可。顺便说一句，您的标题，链接和META属于头部，而不是体内。

相关内容

最新更新

热门标签：