Html Bootstrap 3 将页脚刷新到底部。不固定

Question

提问by user3169403

I am using Bootstrap 3 for a site I am designing.

我正在为我正在设计的网站使用 Bootstrap 3。

I want to have a footer like this sample. Sample

我想要一个像这个示例的页脚。样本

Please note that I don't want it FIXED so bootstrap navbar-fixed-bottom does not solve my problem. I just want it to be always at the bottom of the content and also be responsive.

请注意，我不希望它 FIXED 所以 bootstrap navbar-fixed-bottom 不能解决我的问题。我只是希望它始终位于内容的底部，并且具有响应性。

Any guide will be very much appreciated.

任何指南将不胜感激。

EDIT:

编辑：

Sorry if I wasn't clear. What happens now is that when the content body does not have enough content. My footer moves up and then it leaves an empty space at the bottom.

对不起，如果我不清楚。现在发生的情况是当内容体没有足够的内容时。我的页脚向上移动，然后在底部留下一个空白空间。

This is what i have now for my navbar

这就是我现在的导航栏

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

Answer 1

采纳答案by Surjith S M

See the example below. This will position your Footer to stick to bottom if the page has less content and behave like a normal footer if the page has more content.

请参阅下面的示例。如果页面内容较少，这会将页脚定位到底部，如果页面内容较多，则其行为与普通页脚相同。

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

UPDATE: New version of Bootstrap demonstrates how to add sticky footer without adding a wrapper. Please see Jboy Flaga's Answer for more details.

更新：新版本的 Bootstrap 演示了如何在不添加包装器的情况下添加粘性页脚。有关更多详细信息，请参阅 Jboy Flaga 的回答。

Answer 2

回答by Jboy Flaga

There is a simplified solution from bootstrap here (where you don't need to create a new class): http://getbootstrap.com/examples/sticky-footer-navbar/

这里有一个来自 bootstrap 的简化解决方案（您不需要创建一个新类）：http: //getbootstrap.com/examples/sticky-footer-navbar/

When you open that page, right click on a browser and "View Source" and open the sticky-footer-navbar.css file (http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css)

当您打开该页面时，右键单击浏览器和“查看源代码”并打开sticky-footer-navbar.css 文件（http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css ）。 css)

you can see that you only need this CSS

你可以看到你只需要这个 CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

for this HTML

对于这个 HTML

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>

Answer 3

回答by Christopher Tan

use flexbox as you can use it at your disposal. The solution offered by bootstrap 4 still hunting overlap content in responsive layout, e.g: it will break in mobile view, i come across the most neat trick is to use flexbox solution demo shown at here:(https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/) this way we do not have to deal with fixed height issue which is an obsolete solution by now...this solution works for bootstrap 3 and 4 whichever you using.

使用 flexbox，因为您可以随意使用它。bootstrap 4 提供的解决方案仍然在响应式布局中寻找重叠内容，例如：它会在移动视图中中断，我遇到的最巧妙的技巧是使用此处显示的 flexbox 解决方案演示:( https://philipwalton.github.io /solved-by-flexbox/demos/sticky-footer/) 这样我们就不必处理固定高度问题，这是一个过时的解决方案......这个解决方案适用于引导程序 3 和 4，无论您使用哪个。

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

Answer 4

回答by Rex CoolCode Charles

UPDATE: This does not directly answer the question in its entirety, but others may find this useful.

更新：这并没有直接回答整个问题，但其他人可能会发现这很有用。

This is the HTML for your responsive footer

这是响应式页脚的 HTML

<footer class="footer navbar-fixed-bottom">
     <div class="container">
     </div>
</footer>

For the CSS

对于 CSS

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

NOTE:At the time of the posting for this question the above lines of code does not push the footer below the page content; but it will keep your footer from crawling midway up the page when there is little content on the page. For an example that does push the footer below the page content take a look here http://getbootstrap.com/examples/sticky-footer/

注意：在发布此问题时，上述代码行不会将页脚推送到页面内容下方；但是当页面上的内容很少时，它会阻止您的页脚爬到页面的中间。有关将页脚推送到页面内容下方的示例，请查看此处http://getbootstrap.com/examples/sticky-footer/

Answer 5

回答by eGlu

For people still struggling and the answered solution doesn't work quite as you want it to, here is the simplest solution I have found.

对于仍在苦苦挣扎并且回答的解决方案并不如您所愿的人来说，这是我找到的最简单的解决方案。

Wrap your main content and assign it a min view height. Adjust the 60 to whatever value your style needs.

包装您的主要内容并为其指定最小视图高度。将 60 调整为您的风格需要的任何值。

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

Thats it and it works pretty well.

就是这样，而且效果很好。

Answer 6

回答by weiy

Galen Gidman has posted a really good solution to the problem of a responsive sticky footer that does not have a fixed height. You can find his full solution on his blog: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

Galen Gidman 发布了一个非常好的解决方案，用于解决没有固定高度的响应式粘性页脚的问题。你可以在他的博客上找到他的完整解决方案：http: //galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }

Answer 7

回答by tao

For a pure CSS solution, scroll after the 2nd <hr>. The first one is the initial answer (given back in 2016)

对于纯 CSS 解决方案，在 2nd 之后滚动<hr>。第一个是最初的答案（2016年回馈）

The major flaw of the solutions above is they have a fixed heightfor the footer.
And that just doesn't cut it in the real world, where people use a zillion number of devices and have this bad habit of rotating them when you least expect it and **Poof!** there goes your page content behind the footer!

上述解决方案的主要缺陷是它们的页脚高度是固定的。
而这在现实世界中并没有减少，在现实世界中，人们使用无数的设备，并且有这种坏习惯，即在您最不期望的时候旋转它们，**噗！** 您的页面内容位于页脚后面！

In the real world, you need a function that calculates the height of the footer and dynamically adjusts the page content's padding-bottomto accommodate that height. And you need to run this tiny function on page loadand resizeevents as well as on footer's DOMSubtreeModified(just in case your footer gets dynamically updated asynchronously or it contains animated elements that change size when interacted with).

在现实世界中，您需要一个函数来计算页脚的高度并动态调整页面内容padding-bottom以适应该高度。并且您需要在页面load和resize事件以及页脚上运行这个小函数DOMSubtreeModified（以防万一您的页脚异步动态更新，或者它包含在交互时改变大小的动画元素）。

Here's a proof of concept, using jQuery v3.0.0and Bootstrap v4-alpha, but there is no reason why it shouldn't work on lower versions of each.

这是使用 jQueryv3.0.0和 Bootstrap的概念证明v4-alpha，但没有理由不能在每个较低版本上运行。

jQuery(document).ready(function($) {
  $.fn.accomodateFooter = function() {
    var footerHeight = $('footer').outerHeight();
    $(this).css({
      'padding-bottom': footerHeight + 'px'
    });
  }
  $('footer').on('DOMSubtreeModified', function() {
    $('body').accomodateFooter();
  })
  $(window).on('resize', function() {
    $('body').accomodateFooter();
  })
  $('body').accomodateFooter();
  window.addMoreContentToFooter = function() {
    var f = $('footer');
    f.append($('<p />', {
        text: "Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."
      }))
      .append($('<hr />'));
  }
});

body {
  min-height: 100vh;
  position: relative;
}

footer {
  background-color: rgba(0, 0, 0, .65);
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.5rem;
  display: block;
}

footer hr {
  border-top: 1px solid rgba(0, 0, 0, .42);
  border-bottom: 1px solid rgba(255, 255, 255, .21);
}

<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://v4-alpha.getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<div class="container">
  <div class="starter-template">
    <h1>Feed that footer - not a game (yet!)</h1>
    <p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button>
    <hr />
    <blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.0.0</code> and Bootstrap <code>v4-alpha</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote>
  </div>
</div>

<footer>I am a footer with dynamic content.
  <hr />
</footer>

Initially, I have posted this solution herebut I realized it might help more people if posted under this question.

最初，我在这里发布了这个解决方案，但我意识到如果在这个问题下发布它可能会帮助更多人。

Note:I have purposefully wrapped the $([selector]).accomodateFooter()as a jQuery plugin, so it could be run on any DOM element, as in most layouts it is not the $('body')'s bottom-paddingthat needs adjusting, but some page wrapper element with position:relative(usually the immediate parent of the footer).

注意：我特意将包装$([selector]).accomodateFooter()为一个 jQuery 插件，因此它可以在任何 DOM 元素上运行，因为在大多数布局中，它不是需要调整的$('body')'s bottom-padding，而是一些页面包装元素position:relative（通常是的直接父元素footer） .

Later edit (3+ years after initial answer):

稍后编辑（初始答案后 3 年以上）：

At this point I no longer consider acceptable using JavaScript for positioning a dynamic content footer at the bottom of the page. It can be achieved with CSS alone, using flexbox, lightning fast, cross-browser.

在这一点上，我不再认为使用 JavaScript 在页面底部定位动态内容页脚是可以接受的。它可以单独使用 CSS 实现，使用 flexbox，闪电般快速，跨浏览器。

Here it is:

这里是：

// Left this in so you could inject content into the footer and test it:
// (but it's no longer sizing the footer)

function addMoreContentToFooter() {
  var f = $('footer');
  f.append($('<p />', {
      text: "Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."
    }))
    .append($('<hr />'));
}

.wrapper {
  min-height: 100vh;
  padding-top: 54px;
  display: flex;
  flex-direction: column;
}

.wrapper>* {
  flex-grow: 0;
}

.wrapper>main {
  flex-grow: 1;
}

footer {
  background-color: rgba(0, 0, 0, .65);
  color: white;
  width: 100%;
  padding: 1.5rem;
}

footer hr {
  border-top: 1px solid rgba(0, 0, 0, .42);
  border-bottom: 1px solid rgba(255, 255, 255, .21);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="wrapper">
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
  <main>
    <div class="container">
      <div class="starter-template">
        <h1>Feed that footer - not a game (yet!)</h1>
        <p class="lead">Footer won't ever cover the body contents, as its not fixed. It's simply placed at the bottom when the page should be shorter using `min-height:100vh` on container and using flexbox to push it down.</p><button class="btn btn-warning" onclick="addMoreContentToFooter()">Feed that footer</button>
        <hr />
        <blockquote class="lead">
          <strong>Note:</strong> This example uses current latest versions of jQuery (<code>3.4.1.slim</code>) and Bootstrap (<code>4.4.1</code>) (unlike the one above).
        </blockquote>
      </div>
    </div>
  </main>
  <footer>I am a footer with dynamic content.
    <hr />
  </footer>
</div>

Answer 8

回答by Vin

This method uses minimal markup. Just put all your content in a .wrapper which has a padding-bottom and negative margin-bottom equal to the footer height (in my example 100px).

此方法使用最少的标记。只需将您所有的内容放在一个 .wrapper 中，它的 padding-bottom 和负的 margin-bottom 等于页脚高度（在我的例子中为 100px）。

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>

Answer 9

回答by AnBisw

Or this

或这个

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>

Answer 10

回答by shilovk

For Bootstrap:

对于引导程序：

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>

Html Bootstrap 3 将页脚刷新到底部。不固定

提问by user3169403

采纳答案by Surjith S M

回答by Jboy Flaga

回答by Christopher Tan

回答by Rex CoolCode Charles

回答by eGlu

回答by weiy

回答by tao

回答by Vin

回答by AnBisw

回答by shilovk

相关推荐

最近更新

标签

Html Bootstrap 3 将页脚刷新到底部。不固定

提问by user3169403

采纳答案by Surjith S M

回答by Jboy Flaga

回答by Christopher Tan

回答by Rex CoolCode Charles

回答by eGlu

回答by weiy

回答by tao

回答by Vin

回答by AnBisw

回答by shilovk

相关推荐

Html “语义正确”是什么意思？

html div背景图像未显示

Html 用于打开 URL 的 Google Apps 脚本

Html 如何在 <ul> 标签周围获得边框？

相关推荐

最近更新

标签