Sticky Div需要吃

Question

我有一个问题。我正在创建一个由标题，正文和页脚组成的单列网站。我可以在重新调整大小时将页脚粘贴到页面的底部，但是我的问题是这样的。如何在重新调整尺寸时让窗口“吃”页脚div而不是将它推高？一个很好的例子是ign.com

* { 
margin: 0; 
} 
body 
{ 
height: 100%; 
background-image: url(".."); 
} 
html 
{ 
height: 100%; 
} 
.wrapper 
{ 
width: 950px; 
min-width: 950px; 
min-height: 100%; 
height: auto 
height: 100%; 
margin: 0 auto -4em; 
border: 2px solid black; 
} 
.footer, .push 
{ 
height: 4em; 
border: 2px solid black; 
} 

Answer 1

你要求的是块元素的默认行为。

例子：

HTML：

​<header></header> 
<div></div> 
<footer></footer>​​​​​​​​​​​​​​​​​​​​​​​​​ 

CSS：

​header, footer { 
    height: 5em; 
} 

div { 
    height: 100em; 
} 

Demo

我的建议是增加更多内容添加到您的页面，或者将较大的最小高度设置为包装。

Answer 2

下面的代码添加到页脚和某些最小高度设定为html文档。

.footer { 
margin:1% 0; 
}