粘性页眉和页脚可滚动内容
我试图创建一个包含三个div的页面：页眉，页脚和内容区域。 这些应该占用屏幕的100％。
页眉和页脚很小，不会改变，内容区域可以是任何大小，所以我添加了overflow:auto ，当它变得太大时，它会滚动。
问题是，它溢出了屏幕的高度。 我创建了一个小提琴演示：https：//jsfiddle.net/tdxn1e7p/
我使用下面的CSS来设置html和body的高度，所以容器上的height:100%技巧将起作用：
html,
body {
height: 100%;
}
我的文档结构是：
<div style="height:100%;">
<div>
Header content
</div>
<div style="overflow:auto;">
Body content... this could be very long
</div>
<div>
Footer content
</div>
</div>
在这类问题上，我发现了很多变化，例如这个问题，但还没有能够为我解答任何问题。
方法1 - flexbox
它适用于已知和未知高度元素。 确保将外部div设置为height: 100%; 并重设body的默认margin 。 请参阅浏览器支持表。
的jsfiddle
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.content {
flex: 1;
overflow: auto;
background: pink;
}<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div style="height:1000px;">Content</div>
</div>
<div class="footer">Footer</div>
</div> overflow: auto适用于元素内的内容。 但是div目前有一个流畅的高度，所以它的内容永远不会溢出。
如果你想要内容div滚动而不是溢出页面，你需要添加一个最大高度，如
<div style="max-height: 80%;">
这将使div占据页面高度的80％，但绝不会超过此值。 那么你应该也可以设置机体overflow: hidden处理边距：更新演示。
在Bootstrap 4.0中，为了使滚动内容具有固定的页眉和页脚，请将所有内容包含在容器中。 在页眉和页脚div中使用.fixed-top和fixed-bottom类。 当然，你必须有足够的内容（溢出）才能看到它滚动。
链接地址: http://www.djcxy.com/p/89407.html