我正在尝试创建带有固定菜单和页脚面板的stackoverflow风格应用程序，以及创建浏览器滚动的内部div(必要(。
我只是想问以下代码是否正确实现上述方案？固定顶/固定底是Bootstrap4的样式。我看到我必须在方法中使用html/样式代码中的固定常数。
<body>
<div>
<div class="fixed-top" style="height: 50px; border: 2px solid black">
Header
</div>
<div>
<div style="height: 50px"></div>
(1) The protection of natural persons in relation to the processing of personal data is a fundamental right. Article 8(1) of the Charter of Fundamental Rights of the European Union (the ‘Charter’) and Article 16(1) of the Treaty on the Functioning of
the European Union (TFEU) provide that everyone has the right to the protection of personal data concerning him or her.
<div style="height: 50px"></div>
</div>
<div class="fixed-bottom" style="height: 50px; border: 2px solid black">
Footer
</div>
</div>
</body>而不是使用bootstrap类，请使用以下CSS的标题和页脚将具有固定的高度和绝对位置。
html body {
height: 100%;
overflow: hidden;
}
html body .container-fluid.body-content {
position: absolute;
top: 50px;
bottom: 30px;
right: 0;
left: 0;
overflow-y: auto;
}
fixed-header {
position: absolute;
left: 0;
right: 0;
top: 0;
background-color: #4C4;
height: 50px;
}
fixed-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: #4C4;
height: 30px;
}
<div class="fixed-header">
Header
</div>
<div class="container-fluid body-content">
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<div class="fixed-bottom">
Footer
</div>