Question

我已经在一个简单的页脚上圈了一天，它停留在页面的底部，没有固定。

我设法将它放在全屏页面的底部。但是，当我减小浏览器窗口的宽度以模拟“响应显示”时，当我向下滚动页面时页脚停留在同一位置，因此不会刷新。

这是我的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: 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 2

您可以position:absolute添加

min-height:100%;position:relative;

到您的容器或行。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

<强>解释

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

Answer 3

使用Bootstrap3，您可以使用班级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

段：

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

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响应粘性页脚

4 个答案: