Question

我正在建立一个网站，我想要一个全宽的页脚。但它目前看起来像这样： enter image description here

虽然我希望它看起来像这样：

enter image description here

我不确定它是否是我正在使用的CSS：

你可以在这里看到完整的css和html： http://jsfiddle.net/Mzmtv/

对于完整网站版本：lrch.harisonbh.com

/*I'm not sure if this is possible or not, with using the floating divs*/

基本上我需要存在的页脚div类似于第二张图片中的页脚div。感谢

Answer 1

注意：以下演示和代码仅适用于您的请求。

代码：http://jsfiddle.net/Mzmtv/3/

演示：http://jsfiddle.net/Mzmtv/3/embedded/result

以下html结构的内容

<div class="body">
    <div class="footer">
        &copy;<!--?php echo date("Y") ?--> Little Rock Central High     <a href="#top"><p>Back To Top</p></a>
    </div>
</div>

你应该使用这个：

<div id="footer_container">
    <div class="footer">
        &copy;<!--?php echo date("Y") ?--> Little Rock Central High     <a href="#top"><p>Back To Top</p></a>
    </div>
</div>

<强> CSS：

#footer_container {
    clear: both; 
    margin-top: 194px; 
    z-index: 1; 
    width: 100%; 
    background: #333333;
}

.footer {
  padding: 10px;
  color: #ffffff;
}

屏幕截图： enter image description here

Answer 2

替换

<div class="body">
    <div class="footer">
        &copy;Little Rock Central High<a href="#top"><p>Back To Top</p></a>
    </div>
</div>

使用：

<div class="clear"></div>
<div class="footer">
    &copy;Little Rock Central High<a href="#top"><p>Back To Top</p></a>
</div>

哪里

.clear {
 clear: both;
}

Answer 3

您提供的地址不起作用。我会根据最可能的问题给你一个答案：

你说你有一个页脚“th”让你困惑，因为你说你在使用DIV。我会假设你正在使用div并相应地回答。

将div放在主包装div之外（在所有内容和标签下面很可能
在样式设置为clear:both的代码中放置一个元素。例如，您可以使用：

<br style="clear:both;" />
在页脚div width:100%;

Answer 4

使用moar nested divs

<body>
    <header>
        <div id="head-inner" style="width: 920px;">
            <a href="#">Little Rock High School</a>
        </div>
    </header>
    <div class="body-inner" style="width: 100%; background-color: #ccc">
        <div class="container" style="width: 920px; background-color: #fff; margin: 0 auto;">
            <p>Content</p>
        </div>
    </div>
    <footer>
        <div class="footer" style="width 100%; background-color: #222;">
          <p>Footer stuff</p>
        </div>
    </footer>
</body>

在浮动div下放置一个全宽的页脚？

4 个答案: