Question

目标：我正在尝试按照on this page所述实现CSS页脚。

问题：页脚没有触及页面的右边缘。

我已经将我的页面剥离到以下最简单的案例，但仍然存在这个问题：

HTML：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <link href="my.css" rel="stylesheet">

</head>

<body>



<div class="row footer">
</div> <!-- end of row footer -->

</body>
</html>

CSS：

html {
height: 100%; /* the footer needs this */
box-sizing: border-box; 
}


body {
position: relative;
padding-top: 80px;
padding-bottom: 100px; /* the footer needs this */
min-height: 100%; /* the footer needs this */
}

.footer { /* footer trick learned from https://codepen.io/cbracco/pen/zekgx */
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: #eee;
}

如何让页脚一直延伸到右边？起初我认为这与Boostrap有关（我在＃34;真正的＆＃34;版本的页面中使用），但这似乎不是原因。

我尝试添加＆＃34; padding-right：0;＆＃34;到页脚课但没有效果。

Answer 1

您的页脚有一个row类，可为您的页脚添加margin-left: -15px; margin-right: -15px。（它来自Bootstrap）导致差距。

您可以在页脚中添加left: 15px; right: 15px或删除row类。

请参阅：https://jsfiddle.net/vw489p0n/2/

Answer 2

.footer {
   margin:0;
}

将margin:0提供给行页脚类。

或将body提交给margin:0

Answer 3

你几乎得到了这个：

HTML

 <div class="row nopadding">
       <div class="col-md-12 nopadding">
           <div class=" footer">
                <div class="col-md-6">
                   <!--links-->
                </div><!-- end of col-6-->
               <div class="col-md-6">
                 <!--Contact-->
              </div><!-- end of col-6-->
          </div> <!-- end of footer -->
      </div> <!-- end of col-12-->
 </div> <!-- end of row-->

CSS：

    html {
    height: 100%; /* the footer needs this */
    box-sizing: border-box; 
    }
    body {
    position: relative;
    padding-top: 80px;
    padding-bottom: 100px; /* the footer needs this */
    min-height: 100%; /* the footer needs this */
    margin:0;
    }
    .footer { /* footer trick learned from https://codepen.io/cbracco/pen/zekgx */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #009688;
    }         
    .nopadding{
     margin:0 !important;
     padding:0 !important;    
     }

DEMO：https://jsfiddle.net/edfyv1e3/1/

Answer 4

删除正文填充并在下方添加页脚css。

body {
      position: relative;
      margin: 0;
      padding-bottom: 6rem;/* remove padding*/
      min-height: 100%;
      font-family: "Helvetica Neue", Arial, sans-serif;
    } 
.footer {     
      padding: 1rem;
      background-color: #efefef;
      text-align: center;
    }

Answer 5

根据Bootstrap的说法，你遇到了一个小问题。在Bootstrap文档中，它们很简单：始终将row元素包装在container内。这必须这样做，因为row类为它的孩子增加了一个余量。为避免（或让我们说否定），你需要将它们包裹在container中。

所以你的标记应该是这样的：

<div class="container">
  <div class="row footer">
  </div>
  <!-- end of row footer -->
</div>

没有必要进行任何其他修改。

Answer 6

实际上，默认情况下，用户代理正在向正文应用一些边距，因此如果通过向body添加margin属性来删除该边距将解决此问题。请参考以下css

body {
position: relative;
padding-top: 80px;
margin : 0px;
padding-bottom: 100px; /* the footer needs this */
min-height: 100%; /* the footer needs this */
}

页脚不会一直延伸到页面的右边缘

6 个答案: