固定页眉和页脚，内容可滚动
我将页眉和页脚设置为Position：Fixed。但如果是可滚动的内容，则文本将转到页眉/页脚区域：下面是我的完整代码:http://jsfidle.net/kaqz1km2/6/
在这种情况下，我不想使用background-image或background-color。
下面是CSS：
null
html, body { height:100%; }
header { position:fixed; width:100%; top:0; margin-top:1rem; }
footer { position:fixed; width:100%; bottom:0; line-height:3rem; }null
共有2个答案
使用以下选项更改css
html, body { height:auto; }
header { position:fixed; width:100%;top:0;height:50px;line-height:50px; background-color:#fff;}
footer {position:fixed; width:100%; bottom:0; height:50px;line-height:50px;background-color:#fff;}
nav li { display:inline; text-transform:uppercase; }
p { width:200px; }
li { margin-right:2rem; }
.container{margin-top:50px;margin-bottom:50px;}
并将1个类容器添加到
<pre> <div id="content" class="container"> </pre>
您可以在#content中使用padding
还要为页眉和页脚提供背景色
查看这里的演示
#content { padding: 60px 0 }
-
我正在用CSS来创建具有固定页眉和页脚以及可滚动内容的可滚动“窗口”。这里被接受的答案是我已经得出的最接近解决这个问题的答案，但这需要设置“内容”类div的高度。 我的目标是：1。如果内容小于机身高度，则不滚动2。如果内容长于正文高度减去页眉和页脚，则滚动。 如何实现这一点？
-
问题内容： 我正在尝试创建一个包含三个div的页面：页眉，页脚和内容区域。这些应该占据屏幕的100％。 页眉和页脚很小，不会改变，内容区域可以是任何大小，因此我添加了使其变大时滚动的功能。 我正在使用以下CSS设置html和正文高度，因此容器上的技巧将起作用： 我的文档结构为： 问题答案： 方法1-Flexbox 它适用于已知和未知的高度元素。确保设置外股利和重置默认的。 方法2-CSS表 对于已
-
我正在尝试创建一个模式对话框，它具有固定的页眉和页脚，并且模式对话框中的内容（在本例中为用户列表）是可滚动的... 到目前为止，我的最佳尝试给了我一个结果： 我想看过这张照片后，我就不必再描述问题出在哪里了...我也假设你会知道解决方案是什么样子的...：） 但为了确定我还是会写出来...模式对话框需要有一个固定的页眉（标题“编辑板”、“板名”和“板类型”所在的区域）和页脚（“保存”按钮所在的区域
-
我正在纠结于应用程序的布局。我只想用HTML&CSS来实现它，但绝望正在逼近。我需要： 固定高度、100%宽度、静态标题 固定高度、100%宽度、静态页脚 固定宽度的内容区域，居中和全部剩余高度 内容区域需要： 两列，均为全高 上面的内容相当简单，但可能需要更改以适应下一部分。 每一列都需要： 静态标头 静态页脚 页眉和页脚之间的可滚动内容区域 我花了一天的时间尝试各种方法（甚至是基于--喘息--
-
问题内容： 我正在尝试使用bootstrap 3表制作具有固定标题和可滚动内容的表。不幸的是，我发现的解决方案不适用于引导程序或使样式混乱。 这里有一个简单的引导表，但是由于某种原因我不知道tbody的高度不是10px。 例： 问题答案： 这是有效的解决方案：
-
也许以前有人问过这个问题，但我似乎找不到一个准确的答案或解决办法。我开始使用RecycerView，并使用LinearLayoutManager实现了它。现在，我想添加自定义的页眉和页脚项，这些项不同于RecycerView中的其他项。页眉和页脚不应该粘，我希望他们滚动与其余的项目。有人能指出一些例子如何做到这一点或只是分享想法。我会非常感激的。THX