使页脚正确地粘在页面底部[重复]答案

【问题标题】：Make footer stick to bottom of page correctly [duplicate]使页脚正确地粘在页面底部[重复]
【发布时间】：2011-03-27 11:53:18
【问题描述】：

如果内容没有一直到底部，或者在底部content 如果内容需要滚动条。如果内容不需要滚动条，它可以正常工作，但是当内容太长时，页脚仍然在同一个位置，就在内容的顶部。

我的基本 div 结构是：

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

我对应的 CSS（稍微精简）：

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    width: 674px;
    min-height: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

#body {
    width: 616px;
    padding: 5px 14px 5px 14px;
    margin: 0 auto;
    padding-bottom: 20px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 644px;
    height: 20px;
    margin: 0 auto;
}

【问题讨论】：

这个问题在提供的链接中没有可靠的答案。接受的答案应该是 Vinicius José Latorre 在这个问题中提供的答案，因为它非常清楚并且有效。
可能问题出在 html 或 body 标签上。这个链接帮助了我：makandracards.com/makandra/…

标签： html css

【解决方案1】：

最简单的解决方案是在<html> 标记上使用min-height 并将<footer> 与position:absolute; 定位

演示：jsfiddle 和 SO sn-p：

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px;
    /* bottom = footer height */
    padding: 25px;
}

footer {
    background-color: orange;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow: hidden;
}

<article>
    <!-- or <div class="container">, etc. -->
    <h1>James Dean CSS Sticky Footer</h1>
    <p>Blah blah blah blah</p>
    <p>More blah blah blah</p>
</article>
<footer>
    <h1>Footer Content</h1>
</footer>

【讨论】：

我也喜欢它-谢谢。但是，一个问题：为什么“溢出：隐藏；”？
这是一个非常好的解决方案。唯一的缺点是页脚高度的绝对位置...：/。我仍然使用你的解决方案:)
供将来参考：起初这对我不起作用，因为我已明确设置 html { height: 100%; }。
这个答案很好，但抄袭别人，一行一行，甚至不给予信用，这太不酷了。 -1 因为那个。 mystrd.at/modern-clean-css-sticky-footer
为页脚设置绝对值太可怕了，因为它覆盖了短页面上的其他静态元素。

【解决方案2】：

为什么不使用：{ position: fixed; bottom: 0 }？

【讨论】：

因为页脚会覆盖你的正文内容。
-1 因为滚动时页脚会跟随您
position: static 怎么样？它对我来说效果更好！
position: static 是所有内容的默认位置 - 当内容不够高时，该设置不会将页脚保持在视口底部。
我认为 {position: absolute; bottom:0} 应该可以。

【解决方案3】：

我使用的一个简单解决方案，适用于 IE8+

在 html 上设置 min-height:100%，这样如果内容较少，则页面仍会采用完整的视口高度，并且页脚会停留在页面底部。当内容增加时，页脚会随着内容向下移动并保持在底部。

JS fiddle 工作演示：http://jsfiddle.net/3L3h64qo/2/

CSS

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

HTML

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

【讨论】：

【解决方案4】：

使用这个。它会修复它。

#ibox_footer {
    padding-top: 3px; 
    position: absolute;
    height: 20px;
    margin-bottom: 0;
    bottom: 0;
    width: 100%;
}

【讨论】：

如果包含元素在屏幕底部之前结束则不会

【解决方案5】：

使用最小高度作为一些像素值，而不是%。
喜欢：

min-height:620px;
height:auto;

页脚为：

.footer {
    height:70px;
    clear:both;
    position:relative;
    bottom:0;
    width: 100%;
}

【讨论】：

【解决方案6】：

使用 jQuery 在 <head></head> 标记上放入代码

<script type="text/javascript">
$(document).ready(function() { 
    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;  
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
    }
});
</script>

【讨论】：

很难快速管理和理解，neater 是纯 css 实现。
不久前我正在做类似的事情，但是根据浏览器甚至在页面刷新之间检索页脚的高度不同。看起来很奇怪。虽然它有些工作，但我建议不要使用这种方法。我正在检索 outerHeight。
@landed 纯 CSS 解决方案的问题是 fixed height 或固定高度和 overflow hidden。任何使用 CMS 的人都会遇到困难，而且在响应式日子里固定高度并不酷。
@eoin 我同意你的观点，由于这些原因，固定高度并不是很好。但我更喜欢完美世界（或更高版本的 CSS 规范）中的纯 CSS 解决方案。我想看看 js 创建的零样式或布局。
当然，这不是一个完美的世界，但它正在实现。即使在 ::after 中使用 HTML 也不是一个可行的解决方案（而且永远不会）

【解决方案7】：

这应该对你有帮助。

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

【讨论】：

【解决方案8】：

最简单的技巧是在 400 像素的页面容器中设置 min-height，假设您的页脚位于末尾。如果您的页脚是您的 <body> 的直接子级，您甚至不必为页脚添加 css 或只是 width:100%。

【讨论】：

【解决方案9】：

这里分享的模型与 Ryan Fait 的 StickyFooter 非常相似 http://ryanfait.com/sticky-footer

到目前为止，此讨论中仅缺少一个 div（Kenneth Palanganas 在此处提出的模型在本地 Win81 设计中运行良好约 48 小时，然后在 ie/chrome 中因未知原因崩溃）。 Ryan 的“推送”div 将满足一些不情愿的浏览器。请注意，通常使用 px，但为了保持流畅的布局一致性，可能首选 em。

* { border: 0; margin: 0; padding: 0; }
html, body { height: 100%; }
.wrapper { height: auto !important; height: 100%; margin: 0 auto -1em; min-height: 100%; }
.footer, .push { height: 1em; }

<div class="wrapper"><p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer"><p>This is a footer</p>
</div>

【讨论】：

【解决方案10】：

我想分享我如何使用页面加载时调用的 Javascript 函数解决我的问题。当页面内容的高度小于屏幕高度时，此解决方案将页脚定位在屏幕底部。

function fix_layout(){
  //increase content div length by uncommenting below line
  //expandContent();
  
    var wraph = document.getElementById('wrapper').offsetHeight;
    if(wraph<window.innerHeight){ //if content is less than screenheight
        var headh   = document.getElementById('header').offsetHeight;
        var conth   = document.getElementById('content').offsetHeight;
        var footh   = document.getElementById('footer').offsetHeight;
        //var foottop = window.innerHeight - (headh + conth + footh);
        var foottop = window.innerHeight - (footh);
        $("#footer").css({top:foottop+'px'});
    }
}

function expandContent(){
  $('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.</p>'+

'<p>Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula. Nullam quis enim. Integer dignissim viverra velit. Curabitur in odio. In hac habitasse platea dictumst. Ut consequat, tellus eu volutpat varius, justo orci elementum dolor, sed imperdiet nulla tellus ut diam. Vestibulum ipsum ante, malesuada quis, tempus ac, placerat sit amet, elit.</p>'+

'<p>Sed eget turpis a pede tempor malesuada. Vivamus quis mi at leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquet lacus vitae pede. Nullam mollis dolor ac nisi. Phasellus sit amet urna. Praesent pellentesque sapien sed lacus. Donec lacinia odio in odio. In sit amet elit. Maecenas gravida interdum urna. Integer pretium, arcu vitae imperdiet facilisis, elit tellus tempor nisi, vel feugiat ante velit sit amet mauris. Vivamus arcu. Integer pharetra magna ac lacus. Aliquam vitae sapien in nibh vehicula auctor. Suspendisse leo mauris, pulvinar sed, tempor et, consequat ac, lacus. Proin velit. Nulla semper lobortis mauris. Duis urna erat, ornare et, imperdiet eu, suscipit sit amet, massa. Nulla nulla nisi, pellentesque at, egestas quis, fringilla eu, diam.</p>'+

'<p>Donec semper, sem nec tristique tempus, justo neque commodo nisl, ut gravida sem tellus suscipit nunc. Aliquam erat volutpat. Ut tincidunt pretium elit. Aliquam pulvinar. Nulla cursus. Suspendisse potenti. Etiam condimentum hendrerit felis. Duis iaculis aliquam enim. Donec dignissim augue vitae orci. Curabitur luctus felis a metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius neque at enim. Suspendisse massa nulla, viverra in, bibendum vitae, tempor quis, lorem.</p>'+

'<p>Donec dapibus orci sit amet elit. Maecenas rutrum ultrices lectus. Aliquam suscipit, lacus a iaculis adipiscing, eros orci pellentesque nisl, non pharetra dolor urna nec dolor. Integer cursus dolor vel magna. Integer ultrices feugiat sem. Proin nec nibh. Duis eu dui quis nunc sagittis lobortis. Fusce pharetra, enim ut sodales luctus, lectus arcu rhoncus purus, in fringilla augue elit vel lacus. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce iaculis elit id tellus. Ut accumsan malesuada turpis. Suspendisse potenti. Vestibulum lacus augue, lobortis mattis, laoreet in, varius at, nisi. Nunc gravida. Phasellus faucibus. In hac habitasse platea dictumst. Integer tempor lacus eget lectus. Praesent fringilla augue fringilla dui.</p>');
}

/*sample CSS*/
body{ background: black; margin: 0; }
#header{ background: grey; }
#content{background: yellow; }
#footer{ background: red; position: absolute; }

#header, #content, #footer{ display: inline-block; width: 100vw; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="fix_layout()">
        <div id="wrapper">
            <div id="header" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                [some header elements here]
            </div>
            <div id="content" class="container">
              [some content elements here]
              
              
            </div>
            <div id="footer" class="footer">
                [some footer elements here]
            </div>
        </div>
    </body>

希望对您有所帮助。

【讨论】：