1

我正在制作一个需要全宽页脚的网站。但它目前看起来像这样：在此处输入图像描述

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

在此处输入图像描述

我不确定我使用的 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。谢谢

4

4 回答 4

3

注意：下面的演示和代码仅根据您的要求提供页脚。

代码：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;
}

截屏： 在此处输入图像描述

于 2013-02-19T18:01:26.987 回答
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;
}
于 2013-02-19T15:39:08.330 回答
0

您提供的地址无效。我会根据最可能的问题给你一个答案：

你说你有一个页脚“th”，当你说你正在使用 DIV 时，这让我感到困惑。我将假设您正在使用 div 并相应地回答。

  1. 将 div 放在主包装 div 之外（在所有内容下方和最有可能的标签中

  2. 在代码中放置一个样式设置为 的元素clear:both。例如，您可以使用：

    <br style="clear:both;" />

  3. 在页脚 div 上放置 100% 宽度width:100%;

于 2013-02-19T15:34:12.243 回答
-2

使用 moar 嵌套 div

<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>
于 2013-02-19T15:33:24.077 回答