Question

我的页面只有几行内容。我希望将页脚推到底部。

<div id="footer"></div>

我不想使用

#footer
{
    position:fixed;
    bottom:0;
}

AKA 粘性页脚

没有jQuery这可能吗？

有什么建议吗？

Answer 1

sticky footer还有Ryan Fait不使用固定位置：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    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 */
}

Answer 2

这是一个解决方案，不要求将页脚放在主包装元素之外，这是大多数人构建页面的方式。

html,
body {
  margin: 0;
  height: 100%;
}

.wrapper {
  box-sizing: border-box;
  position: relative;
  padding-bottom: 1em; /* Height of footer */
  min-height: 100%;
}

header {
  background-color: #cff;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  background-color: #000;
}

<div class="wrapper">
  <header>I am the header.</header>
  <article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
  <footer>I am the footer.</footer>
</div>

<强>解释

包装器元素将填充100％的视口高度。（如果你不想设置html和body元素的高度，也可以使用100vh作为包装器。）包装器还有一个底部填充，用于创建一个占位符供页脚使用。

页脚绝对位于包装器的底部，并位于由包装器底部填充创建的占位符中。

这意味着当页面没有滚动条时，页脚将位于最底部。但是，当滚动条有足够的内容出现时，页脚将被按下内容。

Answer 3

尝试Steve Hatcher的Sticky Footer解决方案

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {
    margin: 0;
    padding: 0;
}

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to the total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 180px;
}

/* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear: both;
}

/*Opera Fix*/
body:before {
    /* thanks to Maleika (Kohoutec)*/
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}

/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

*/

Answer 4

这个Flexbox解决方案更简洁，更容易实现：

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

确保在divs内包含必要的body。

Answer 5

我尝试了很多方法，但是无论页面是否完全填满，结果都是不同的。最简单有效的解决方案是使用 flex 。

html, body {height: 100%;}
body {display: flex; flex-direction: column;}
.content {flex: 1 0 auto; padding: 20px;}
.footer {flex-shrink: 0; padding: 20px;}

<div class="content">
  <h1>The GOAT Footer with Flexbox</h1>
  <p>You can add content to test with a full page</p>
</div>
<footer class="footer">
  The GOAT Footer 
</footer>

贷记CSS Trick

Answer 6

如果您不知道页脚大小，另一种方法是使用javascript和CSS

html, body{
    height:100%;
    height:100%;
}

#footer{
    background-color: #292c2f !important;
    position:absolute;bottom:0px;
}

和Javascript部分

$(document).ready(function(){
        if ($(document).height() > $(window).height()) {
            $('#footer').css('position', 'relative');
        }
});

您可以通过在页脚标签之前在标签上设置最小高度来轻松实现另一种方法。

.the-tag-before-footer{
     min-height:30%;
 }

在页面底部强制页脚，内容很少

6 个答案:

HTML

CSS