0

如何使导航栏和页脚固定。

图片显示:

在此处输入图像描述

4

2 回答 2

4

开始了

HTML:

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

CSS:

#导航栏,
#页脚{
    宽度:100%;
    高度:20px;
    背景:#ccc;
    位置:固定
}

#navbar {顶部:0}
#footer {底部:0}

html,正文 {高度:100%}

现场示例

于 2013-05-23T16:01:52.103 回答
0

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

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

于 2013-05-23T16:00:45.867 回答