屏幕底部没有位置的页脚答案

【问题标题】：Footer at the bottom of the screen without position屏幕底部没有位置的页脚
【发布时间】：2014-07-17 15:59:41
【问题描述】：

This is my code

即使内容较少，我也想将页脚保留在屏幕底部。如果有更多内容，则将其向下移动。

在做了一些研究后，我得到了使用位置this 的可能解决方案之一。

但是在某些情况下，内容增加时页脚与内容重叠。

因此我会避免使用position。使用JS 将是我最后的解决方案。

【问题讨论】：

你应该试试 calc()。
在这里查看解决方案cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css
见sticky footer

标签： html css sticky-footer

【解决方案1】：

最简单的解决方案是calc()

检查此demo。

CSS

#mainCnt {
  min-height: calc(100% - 90px);
}

注意：IE8 及更低版本不支持此功能

【讨论】：

对于 2.4k 代表，您应该提到这不支持跨浏览器和 IE9+！
@NoobEditor 这是一个很好的解决方案，反正IE9以下不用管。
是的，calc 很好但是it's experimental - 也就是说，没有跨浏览器标准化。几年后它会好起来的，或者如果你知道你的确切受众.. 否则我建议谨慎使用（不是任何关键设计用途）。
@NoobEditor ：您说得对，必须提及。我已经做了。感谢您的通知。
@NoobEditor Link Here 在这之后让我们删除我们的 cmets 作为垃圾邮件页面哈哈

【解决方案2】：

您正在寻找Sticky Footer。有几种方法可以做到，这里有一个：

基本结构

<div id="wrap">
    <div id="main">

    </div>
</div>

<div id="footer">

</div>

必需的 CSS

/*  
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 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]-->
*/

【讨论】：

【解决方案3】：

如果您可以将固定高度应用于页脚，则效果很好。

CODEPEN

HTML

内容！

我是粘性页脚。

CSS

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

【讨论】：

【解决方案4】：

这里你去简单的解决方案父 div 位置相对和子绝对位置与底部固定位置http://codepen.io/anon/pen/KgmJb

HTML

    <div id="mainCnt">
<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>   
</div>
<div id="footer">
    Footer
</div>

CSS

*{margin: 0}
#mainCnt {
  min-height: 607px;
  height: 100%;
  position:relative;
}
#footer {
    position: absolute;
  padding: 10px;
  background: red;
  width:100%;
  height:70px;
  bottom:0;
}

【讨论】：