Question

This is my code

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

在做了一些研究后，我得到了解决方案，使用位置this是其中之一。

然而，在某些情况下，当内容增加时，页脚会与内容重叠。

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

Answer 1

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

检查此demo。

CSS

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

注意：IE8及以下

不支持此功能

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

Answer 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;
}

Answer 4

在这里，您可以使用底部固定位置http://codepen.io/anon/pen/KgmJb

来简单解决父div位置相对和子绝对问题

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;
}

屏幕底部没有位置的页脚

4 个答案: