Bootstrap 响应式粘性页脚

Question

我在页面底部的一个简单的页脚上绕了 1 天，没有固定。

我设法将它放在全屏页面的底部。但是，当我减小浏览器 window 的宽度以模拟 "responsive display" 时，当我向下滚动页面时页脚停留在同一位置，因此不会向下刷新。

这是我的 html :

<html>
<body>

<div class="container">

<div class="row text-center">

<p> Blablabla </p>

</div> <!-- row -->

</div> <!-- container -->

    <div class="footer text-center">
            <p class="small">Alright !</p>
    </div>

</body>
</html>

还有我的 CSS :

html {
 height: 100%; 
}

body {
  height: 100%; 
  padding-bottom: 30px;           
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
}

我试过 Bootstrap 的页脚栏是这样的：

<div class="col-md-12 col-xs-12">

    <div class="footer text-center">
            <p class="small">&#169; 2017 Le Point G</p>
        </div>

</div>

但这种方法似乎并不合适，因为它使我的不同页面上的内容不一致，因为一页与另一页的内容量不同，或多或少地将页脚向下推。

有更好的建议吗？

Answer 1

你可以 position:absolute 只需添加

min-height:100%;position:relative;

到您的容器或行。

.row {
min-height:100%;
   position:relative;
}
 html {
 height: 100%; 
}

body {

 
  padding-bottom: 30px;           
}

.footer {
position:absolute;
  background-color: blue;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      
       <style type="text/css">
      

       </style>
       <script type="text/javascript">
        
       </script>
       </head>
       <body>
       
     

<div class="container">

<div class="row text-center" >

<p> Blablabla </p>

</div> <!-- row -->

</div> <!-- container -->

    <div class="footer text-center">
            <p class="small">Alright !</p>
    </div>


</body>
</html>

说明

容器 div 有一个 min-height:100% -- 这将确保它保持整个屏幕的高度，即使几乎没有任何内容。容器 div 设置为 position:relative; 这允许我们绝对定位其中的元素。页脚具有以 px 为单位的设置高度。页脚使用 bottom:0 绝对定位，这会将其移动到容器的底部 div。当页面上的内容很少时，容器 div 恰好是浏览器视口的高度，因为它设置为 min-height:100% 并且页脚位于屏幕底部。当内容超过一页时，容器 div 会变大并向下延伸到视口底部以下 - 页脚仍位于容器底部 div。页脚也设置为 width:100%;，因此它覆盖了整个页面。

Answer 2

如果我对你的问题理解正确，你希望页脚始终固定在 window 的底部，而不考虑页面内容的长度。

如果是这样，请尝试 position: fixed 而不是 position: absolute

html {
 height: 100%; 
}

body {
  height: 100%;
  padding-bottom:30px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-color:white;
}

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

<div class="container">

<div class="row text-center">

<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>

</div> <!-- row -->

</div> <!-- container -->

    <div class="footer text-center">
            <p class="small">Alright !</p>
    </div>

</body>
</html>

Answer 3

通过 Bootstrap3，您可以使用 class navbar-fixed-bottom。它不是那么好，但它有效。

HTML:

<html>
<head>..</head>
<body>....
    <div class="navbar-fixed-bottom">
        <p>Your Text</p>
    </div>
</body>
</html>

Something like that, but with "div" tags - w3schools

片段：

html, body {
  margin: 0%;
  padding: 0%;
}

.container {
  height: 600px;
  background-color: #6c6c6c;
}

myFooter {
  background-color: #fff;
}

@media screen and (min-width: 480px){
  footer {
    position: absoulute;
    bottom: 0;
    background-color: #000 !important;
  }
}

<html>
<head>
  <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">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid text-center">
    <p>Some Text in Container</p>
  </div>
  
  <footer class="myFooter text-center">
    <p>Footer Text - Resize Window</p>
  </footer>
</body>

Answer 4

<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>    
<!-- Footer -->
    <footer class="page-footer font-small indigo">

      <!-- Footer Links -->
      <div class="container text-center text-md-left">

        <!-- Grid row -->
        <div class="row">

          <!-- Grid column -->
          <div class="col-md-3 mx-auto">

            <!-- Links -->
            <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

            <ul class="list-unstyled">
              <li>
                <a href="#!">Very long link 1</a>
              </li>
              <li>
                <a href="#!">Very long link 2</a>
              </li>
              <li>
                <a href="#!">Very long link 3</a>
              </li>
              <li>
                <a href="#!">Very long link 4</a>
              </li>
            </ul>

          </div>
          <!-- Grid column -->

          <hr class="clearfix w-100 d-md-none">

          <!-- Grid column -->
          <div class="col-md-3 mx-auto">

            <!-- Links -->
            <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

            <ul class="list-unstyled">
              <li>
                <a href="#!">Link 1</a>
              </li>
              <li>
                <a href="#!">Link 2</a>
              </li>
              <li>
                <a href="#!">Link 3</a>
              </li>
              <li>
                <a href="#!">Link 4</a>
              </li>
            </ul>

          </div>
          <!-- Grid column -->

          <hr class="clearfix w-100 d-md-none">

          <!-- Grid column -->
          <div class="col-md-3 mx-auto">

            <!-- Links -->
            <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

            <ul class="list-unstyled">
              <li>
                <a href="#!">Link 1</a>
              </li>
              <li>
                <a href="#!">Link 2</a>
              </li>
              <li>
                <a href="#!">Link 3</a>
              </li>
              <li>
                <a href="#!">Link 4</a>
              </li>
            </ul>

          </div>
          <!-- Grid column -->

          <hr class="clearfix w-100 d-md-none">

          <!-- Grid column -->
          <div class="col-md-3 mx-auto">

            <!-- Links -->
            <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

            <ul class="list-unstyled">
              <li>
                <a href="#!">Link 1</a>
              </li>
              <li>
                <a href="#!">Link 2</a>
              </li>
              <li>
                <a href="#!">Link 3</a>
              </li>
              <li>
                <a href="#!">Link 4</a>
              </li>
            </ul>

          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

      </div>
      <!-- Footer Links -->

      <!-- Copyright -->
      <div class="footer-copyright text-center py-3">© 2020 Copyright:
        <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
      </div>
      <!-- Copyright -->

    </footer>
    <!-- Footer -->

Bootstrap 响应式粘性页脚

Bootstrap Responsive sticky footer

css

twitter-bootstrap

footer

responsive

sticky-footer