内容短缺或丢失时如何将页脚推到页面底部？

I have a page with an outer div that wraps a header, content and footer div. I want the footer div to hug the bottom of the browser, even when the content div is not tall enough to fill the viewable area (i.e. there's no scrolling).

我有一个外部div的页面，包含标题，内容和页脚div。我希望页脚div拥抱浏览器的底部，即使内容div不够高，无法填充可视区域（即没有滚动）。

12 个解决方案

#1

What I wanted was to have the footer be at the bottom of browser view ONLY IF the content was not long enough to fill up the browser window (non-sticky).

我想要的是只有在内容不足以填满浏览器窗口（非粘性）时才将页脚放在浏览器视图的底部。

I was able to achieve by using the CSS function calc(). Which is supported by all modern browsers. You could use like:

我能够通过使用CSS函数calc（）来实现。所有现代浏览器都支持它。你可以使用像：

<div class="container">CONTENT</div>
<div class="footer">FOOTER</div>

the css:

css：

.container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 186px);
    min-height: -moz-calc(100% - 186px);
    min-height: calc(100% - 186px);
}

Change 186 to the size of your footer.

将186更改为页脚大小。

#2

Example : http://jsfiddle.net/AU6yD/

示例：http：//jsfiddle.net/AU6yD/

html, body { height: 100%; }

#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }
#bottom, #push { height:30px;}

body { background:#333;}
#header { height:30px; background:#000; color:#fff; }
#footer { height:30px; background:#000; color:#fff; }

<div id="wrapper">
    <div id="header">
        Header
    </div>
    <div id="push"></div>
</div>
<div id="bottom">
    <div id="footer">
        Footer
    </div>
</div>

#3

I did what Jahmic up top did (won't let me comment yet) except I had to use VH instead of % since I couldn't just apply it to a container class.

我做了Jahmic up top做了什么（不会让我发表评论），除了我不得不使用VH代替％，因为我不能将它应用到容器类。

#inner-body-wrapper
{
    min-height: 70vh;
    min-height: -webkit-calc(100vh - 186px);
    min-height: -moz-calc(100vh - 186px);
    min-height: calc(100vh - 186px);
}

#4

Try using

尝试使用

position:absolute;
bottom:0;

it solved my problem.

它解决了我的问题。

#5

To make it work responsively when the footer is taller on mobile devices compare to on desktop, you can't really know the footer height. One way to do it is to stretch the footer out to cover the entire screen.

当桌面上的页脚比移动设备更高时，要使其响应起作用，您无法真正了解页脚高度。一种方法是将页脚拉伸以覆盖整个屏幕。

html,
body {
  height: 100%;
}

.container {
  min-height: 80%;
  background-color: #f3f3f3;
}

.footer {
  background-color: #cccccc;
  box-shadow: 0px 500px 0px 500px #cccccc;
}

<div class="container">Main content</div>
<div class="footer">Footer</div>

#6

Your issue can be easily fixed by using flexbox. Just wrap your .container and your .footer in a flex container with a min-height: 100vh, switch the direction to column so that they stack on top of each other, and justify the content with space between so that footer will move to the bottom.

使用flexbox可以轻松解决您的问题。只需将.container和.footer包装在一个最小高度为100vh的弹性容器中，将方向切换到列，使它们堆叠在彼此的顶部，并在内容之间用空间对齐，以便页脚移动到底部。

.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between
}

<div class="flex-wrapper">
  <div class="container">The content</div>
  <div class="footer">The Footer</div>
</div>

#7

I tried: http://jsfiddle.net/AU6yD/ as here it's the best option but I had problems when the content of the <div id="wrapper"> started to get too big see evidence.png, what I did to solve this was refreshing the body size everytime I changed the content of that div like this:

我试过：http：//jsfiddle.net/AU6yD/这里是最好的选择，但是当

的内容开始变得太大时我遇到了问题，请参阅evidence.png，我做了什么每当我改变那个div的内容时解决这个令人耳目一新的体型大小如下：

var body = document.body,
html = document.documentElement;
body.style.height = 100 + "%";
setTimeout(function(){
   var height = Math.max( body.scrollHeight, body.offsetHeight,
                          html.clientHeight, html.scrollHeight, 
                          html.offsetHeight );
   body.style.height = height + "px";
}, 500);

#8

Try with this codepen.io/dendii/pen/LLPKJm media responsive

尝试使用此codepen.io/dendii/pen/LLPKJm媒体响应

html, body {
  color:#fff;
}
.wrapper{
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100vh;
}
.main{
  width:100%;
  overflow:hidden;
}
.main-inner {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
article,aside{
  float:left;
  padding:20px 10px;
}
article{
  width:70%;
  background:darkred;
}
aside{
  width:30%;
  background:darkblue;
}
.top {
  padding:20px 10px;
  height:100%;
  background:darkgreen;
}
.bottom,.text-mid {
  padding:20px 10px;
  height:100%;
  background:darkorange;
}
.text-mid {
  margin-top: auto;
  background:darkgrey;
}
@media (max-width: 768px){
  .main-inner{
    display: block;
  }
  article,aside{
    width:100%;
    float:none;
    display: block;
  }
}

<div class="wrapper">
    <header class="top">
      <h1>Header</h1>
    </header>
<div class="main"><div class="main-inner">
  <article>
    blank content
  </article>
  <aside>
    class sidebar
  </aside>
</div></div>
<div class="text-mid">
    <div class="center">
        Whatever you want to keep.
    </div>
</div>
<footer class="bottom">
    <div class="footer">
        Footer
    </div>
</footer>
 </div>

Another alternative if you want a main-wrapper to adjust the screen EqualHeight

另一种选择，如果你想要一个主包装器来调整屏幕EqualHeight

#9

I tried this and it works fine so far

我试过这个，到目前为止工作正常

position:absolute;
bottom:0;
width:100%;

or

要么

position:absolute;
bottom:0;
left:0;
right:0;

#10

I've solved same problem with jquery

我用jquery解决了同样的问题

    var windowHeiht = $(window).height();
    var footerPosition = $("#asd-footer").position()['top'];

    if (windowHeiht > footerPosition) {
        $("#asd-footer").css("position", "absolute");
        $("#asd-footer").css("bottom", "0");
        $("#asd-footer").css("width", "100%");
    }

#11

Reworking the jQuery solution. I have it working with resizing the window. When the window is bigger than the page, the footer style's position is "absolute" fixed at the bottom the window. When the window is smaller than the page, the footer stays at the bottom of the page - scrolling off the bottom.

重新编写jQuery解决方案。我有它调整窗口大小。当窗口大于页面时，页脚样式的位置是“绝对”固定在窗口的底部。当窗口小于页面时，页脚停留在页面底部 - 从底部滚动。

<style>
    .FooterBottom {
        width:100%;
        bottom: 0;
        position: absolute;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        FooterPosition();

        $(window).resize(function () {
            FooterPosition();
        });
    });

    var originalFooterBottom = 0;

    function FooterPosition() {
        var windowHeight = $(window).height();
        if (originalFooterBottom == 0) {
            var footer = $("#Footer");
            originalFooterBottom = footer.position()['top'] + footer.height();
        }

        if (windowHeight > originalFooterBottom) {
            var footerElement = document.getElementById("Footer");
            if (!footerElement.classList.contains('FooterBottom')) {
                footerElement.classList.add('FooterBottom');
            }
        }
        else {
            var footerElement = document.getElementById("Footer");
            if (footerElement.classList.contains('FooterBottom')) {
                footerElement.classList.remove('FooterBottom');
            }
        }

    }
</script>

I tried many style only solutions but none of them worked. This Javascript/Style solution works just fine for me, even with its odd mix of jQuery and GetElement.

我尝试了很多只有样式的解决方案，但没有一个能够工这个Javascript / Style解决方案对我来说效果很好，即使是奇怪的jQuery和GetElement混合。

Thanks to Asad for his post.

感谢Asad的帖子。

#12

This is what I am doing for my page

这就是我为我的页面所做的事情

<h6 style="position:absolute; bottom:0;">This is footer at bottom of page without scrollbars</h6>