包装高度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;    
}