如何修复navbar＆amp; HTML CSS中的页脚

Question

如何修复导航栏和页脚。

显示的图片：

Answer 1

我们走了

HTML：

<div id="navbar"></div>
<div id="body-content"></div>
<div id="footer"></div>

CSS：

#navbar,
#footer {
    width:100%;
    height:20px;
    background:#ccc;
    position:fixed
}

#navbar {top:0}
#footer {bottom:0}

html, body {height:100%}

Live Example

Answer 2

使用3个具有绝对位置的div。

<强> HTML

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

<强> CSS

#header, #content, #footer { position absolute; left: 0; right: 0 }
#header { top: 0; height: 200px; }
#content { top: 200px; bottom: 200px; overflow-y: auto; }
#footer { bottom: 0; height: 200px;}

但如果可能，请避免这种情况。您将遇到小屏幕和页眉和页脚溢出的问题。