引导页脚元素位置底部

本文介绍了引导页脚元素位置底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我创建的HTML页面中，我想添加一个页脚。我使用Bootstrap，并在中显示了可以定位页脚元素到页面底部，而不是将footer元素放在容器元素（直接在body元素内，在容器元素下面）。

Within a HTML page I have made, I wanted to add a footer. I am making use of Bootstrap and in this example it is shown that the footer element can be positioned to the bottom of the page without putting the footer element inside a container element (directly within the body element, below a container element).

每当我自己尝试一下看起来像元素将首先定位到底部。但是后来我注意到在其他页面（内容较长），页脚开始出现在浏览器的底部，而不是body元素。效果是，页脚上方的容器元素会显示在页脚之后，而页脚下方则不会显示到页面元素的底部。

Whenever I try this myself, it looks like the element will be positioned to the bottom at first. But then I noticed on other pages (which were longer on content), the footer started appearing to the bottom of the browser instead of the body element. The effect is that the container element above the footer will show itself behind the footer and below without the footer going to the bottom of the body element.

确保在以下代码示例中滚动：

.body {
  overflow: scroll;
  background-color: tomato;
  /*The height is set so that an overflow: scroll; can happen, to reproduce
  my sitation. When the content of the body tag is too long, the browser will
  show a scroll bar and when scrolling down, the footer does not appear on the
  bottom anymore but somewhere in the middle or maybe even top side, depending on
  how long the body would become. */
  height: 300px;
  position: relative;
}
.container {
  background-color: yellow;
  /*This would be a dynamic number, when removing this property.
  If you do not really understand the idea I am talking about, try to change
  this value and see for yourself what happens (with the footer element).
  The height is set only for the sake of showing the issue. */
  height: 500px;
}
footer {
  background: #e0f2f7;
  position: absolute;
  bottom: 0;
  width: 100%;
}

<div class="body">
  <h2>
    Foo
  </h2>
  <div class="container">
    asdasds
  </div>
  <footer>sadasdsa</footer>
</div>

我可以做什么，使我的页脚元素的行为与中的一样

What can I do to make my footer element behave just like the one in the Bootstrap example (so that it will always stick to the bottom) and without having to put the footer element in a certain container element?

推荐答案

如果在一个容器元素中放置了页脚元素，您希望页脚始终显示在网站底部，而不是在容器上。你需要添加min-height：100％& position：相对于html而不是body。对于body元素，您需要添加页脚高度值的margin-bottom。

If you want footer to be visible all the time at the bottom of the site, but not over the container. You need to add min-height:100% & position:relative to html not to body. To body element you need to add margin-bottom with value of footer height.

html{
    min-height:100%;
    position: relative;
}
body {
    background-color: tomato;
    margin:0 0 60px 0;
    padding:0;
}
.container {
    background-color: yellow;
    height: 300px;
}
footer {
    background: #e0f2f7;
    position: absolute;
    bottom: 0;
    width: 100%;
    height:60px;
}

<html>
    <body>
        <h2>Foo</h2>
        <div class="container">asdasds</div>
        <footer>sadasdsa</footer>
    </body>
</html>

编辑1：

Edit 1:

如果您要设置页脚的动态高度，请使用此JS代码（如果您使用jQuery）

If you want to make dynamic height of the footer use this JS code (if you use jQuery)

$( document ).ready(function() {
    var height = $( 'footer' ).height();
    $( 'body' ).css('margin-bottom',height + 'px');
});

这篇关于引导页脚元素位置底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！