页脚不会横跨整个页面

Question

所以我一直试图让我的页脚在整个页面上伸展，但无论出于何种原因，它只与我的 body 的宽度相匹配。页脚不在 body 之内，我尝试设置 100% 的宽度但没有结果，尝试了 110% 但它向右移动，尝试移动边距或位置也没有运气，边距 0 ，填充 0，几乎所有我能想到或找到的东西都没有运气。这就是我今晚以代码明智的方式结束的。

HTML

</body>
 <footer>    
  <?php include ('common/footer_links.php');?> 
 </footer>
</html>

CSS

body {
    padding-top: 50px;
    font: 14px/18px Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #000;
    background-image: url(../images/backgroundtile.png);
    width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

footer{
    clear: both;
    height: 100px;
    background: #333;
    float: none !important;
}

Answer 1

页脚不能在正文之外，否则将是无效的 HTML 页面。事实上，页面的所有内容都应该在 body 标签内。

<html>
<body> 
 <footer>    
  <?php include ('common/footer_links.php');?> 
 </footer>   
</body>
</html>

Answer 2

试试这个

<html>
<head>
<style>
.body {
    padding-top: 50px;
    font: 14px/18px Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #000;
    background-image: url(../images/backgroundtile.png);
    width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

footer{
    clear: both;
    height: 100px;
    background: #333;
    float: none !important;
}
</style>
</head>
<body>
    <div class="body"></div>
    <footer>    
      <?php include ('common/footer_links.php');?> 
    </footer>
</body>
</html>

Answer 3

真实结构)

<html>
  <body>
    <section class="content"></section>
    <footer></footer>
  </body>
</html>

页脚不会横跨整个页面

Footer Won't Stretch Across Full Page

html

css

footer