Question

所以我正在使用bootstrap做一个页脚，它看起来很棒但是当我输入这个分辨率（下图）时，一个空白区域显示出来了。

Boostrap页脚：

这就是我所做的：

<footer>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <h6>Copyright &copy; 2018</h6>
      </div>
      <div class="col-sm-6">
        <h6>About us</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
      </div>
    </div>
  </div>
</footer>

footer{
 background: #333;
 color: #eee;
 font-size: 11px;
 padding: 20px;
}

我该如何解决？

随着nikhil的方法，这种情况正在发生

attemp

Answer 1

我不确定这是否是您想要的，但您可以将style="min-height:100vh"添加到您的网页内容容器中，并将页脚放在另一个容器中。

这样您的页脚将始终位于页面底部。

Answer 2

这将有效：

＆＃13;

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            .footer {
                position: fixed;
                left: 0;
                bottom: 0;
                width: 100%;
                background-color: black;
                color: white;
                text-align: center;
            }
        </style>
    
    </head>
    
    <body>
    
        <div class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
                        <h6>Copyright &copy; 2018</h6>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
                        <h6>About us</h6>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue
                            ante, et sodales felis vulputate iaculis.</p>
                    </div>
                </div>
            </div>
        </div>
    
    </body>
    
    </html>

＆＃13;

<强>拨弄：https://jsfiddle.net/rq3eab2v/2/

如果您使用bootstrap 4使用col- *而不是col-xs- * ok

Answer 3

Position fixed 从正常的内容流中删除元素。因此，您需要使用 bottom: 0; 将页脚放在最底部。

.postion-b-0 {
  bottom: 0;
}

您的大多数css代码都是不必要的。您只需要使用上面的属性。

.postion-b-0 {
  bottom: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<footer class="position-fixed container-fluid bg-dark text-white py-5 postion-b-0">
  <div class="row">
    <div class="col-6 ">
      <h6>Copyright &copy; 2018</h6>
    </div>
    <div class="col-6">
      <h6>About us</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
    </div>
  </div>
</footer>

列占用上面代码中的一半行。但如果您想在移动设备上使用全宽列，请使用以下代码。

.postion-b-0 {
  bottom: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<footer class="position-fixed container-fluid bg-dark text-white py-5 postion-b-0">
  <div class="row">
    <div class="col-12 col-sm-6 ">
      <h6>Copyright &copy; 2018</h6>
    </div>
    <div class="col-12 col-sm-6">
      <h6>About us</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
    </div>
  </div>
</footer>

如何修复此页脚？

3 个答案: