Bootstrap 响应式粘页脚

【问题标题】：Bootstrap Responsive sticky footerBootstrap 响应式粘页脚
【发布时间】：2017-07-19 12:48:54
【问题描述】：

我在一个简单的页脚上绕了 1 天，该页脚位于页面底部，未固定。

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

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

但是这种方法似乎不合适，因为它在我的不同页面上不一致，因为内容量从一个页面到另一个页面不同，或多或少地向下推页脚。

有更好的建议吗？

【问题讨论】：

    标签： css twitter-bootstrap footer responsive sticky-footer


    【解决方案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 为单位的设定高度。页脚绝对定位为底部：0，这会将其移动到容器 div 的底部。当页面上的内容很少时，容器 div 恰好是浏览器视口的高度，因为它设置为 min-height:100% 并且页脚位于屏幕底部。当内容超过一页时，容器 div 会变大并向下延伸到视口底部下方 - 页脚仍位于容器 div 的底部。页脚也设置为width:100%;，因此它覆盖了整个页面。

    【讨论】：

    • 但是如果我这样做，当没有足够的内容“下推”时，它不会停留在页面底部。
    • 你需要给你的身体一个最小宽度，这样即使内容不够长，页脚也会留在底部
    • 这个最小宽度需要多少？
    • 您需要针对不同的屏幕尺寸使用媒体查询..等等，我为您提供了一个 sn-p 示例
    • 检查sn-p..你可以通过轻微的修改来实现它..将min-height:100%; position:relative;添加到你的容器中
    【解决方案2】：

    如果我正确理解您的问题，您希望页脚始终固定在窗口底部，无论页面内容的长度如何。

    如果是这样，请尝试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>

    【讨论】：

    • 如果我表达不清楚，我很抱歉。我不希望它被修复，而是始终位于页面底部，尤其是当窗口宽度减小时，这是我努力实现的目标。
    • 如果不是fixed，我不确定您所说的“始终位于页面底部”是什么意思。按页面，你指的是内容还是窗口？
    【解决方案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

    片段：

    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>

    【讨论】：

    • 抱歉造成误会。我不希望页脚固定，但始终位于页面底部，这是我在桌面页面中实现的，而不是在移动页面中。
    • 您可以将 @media screen and (min-width: 480px) 之类的内容作为 CSS 添加到类或页脚中。在那里您可以添加 CSS 规则，例如 position: fixed; 以将页脚设置到页面底部。
    • 我编辑了我的答案。在 sn-p 中，我在 css 中添加了 @media ... 。在这里你现在可以添加 CSS 来设置底部的页脚等等......
    【解决方案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 -->

    【讨论】：

    • 感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。
    猜你喜欢
    • 2013-05-31
    • 1970-01-01
    • 2013-10-31
    • 1970-01-01
    • 2013-11-04
    • 2012-07-29
    • 2018-07-29
    • 2018-03-25
    • 2014-11-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode