包装高度100%显示滚动条

Question

如何在页面底部删除滚动条和显示页脚?

HTML:

<div class="wrapper">
    wrapper
</div>
<footer>
    footer
</footer>

CSS:

* {
    padding: 0;
    margin: 0;
}
html, body {
    height: 100%;
    width: 100%;
}
.wrapper {
    height: 100%;
}

http://jsfiddle.net/eoe26o83/

Answer 1

上面的问题是包装器的高度为100%，在该页面上留下"没有空间"的页脚。它必须放置在页面的100%被使用之后，从而强制滚动。

相反，您可以将页脚的位置更改为固定位置，并且始终位于页面底部。

footer{
    position:fixed;
    bottom:0;
}

http://jsfiddle.net/eoe26o83/4/

Answer 2

在CSS中使用calc()。唯一需要注意的是你需要知道你的页脚的高度。

http://jsfiddle.net/michaelburtonray/eoe26o83/9/

HTML

<div class="wrapper">
    <p>wrapper</p>
    <p>wrapper</p>
    <p>wrapper</p>
    <p>wrapper</p>
    <p>wrapper</p>
    <p>wrapper</p>
    <p>wrapper</p>
    <p>wrapper</p>
    <p>wrapper</p>
    <p>wrapper</p>
    <p>wrapper</p>
    <p>wrapper</p>
</div>
<footer>
    footer
</footer>

CSS

* {
    padding: 0;
    margin: 0;
}
html, body {
    height: 100%;
    width: 100%;
}
.wrapper {
    min-height: calc(100% - 100px);
}
footer {
    background: red;
    height: 100px;    
}