最佳答案
您可以使用 Flexbox
和 overflow: auto
(将 header
上的 50px
更改为您想要的高度)。
body, html {
margin: 0;
padding: 0;
}
.element {
height: 100vh;
display: flex;
flex-direction: column;
}
header {
height: 50px;
background: #ED7D31;
}
.content {
flex: 1;
background: #5B9BD5;
overflow: auto;
}
.inner {
height: 1000px;
}
<div class="element">
<header>Header</header>
<div class="content">
<div class="inner">Content HEre</div>
</div>
</div>
使用 calc()
的其他解决方案
body, html {
margin: 0;
padding: 0;
}
.element {
height: 100vh;
}
header {
height: 50px;
background: #ED7D31;
}
.content {
height: calc(100vh - 50px);
background: #5B9BD5;
overflow: auto;
}
.inner {
height: 1000px;
}
<div class="element">
<header>Header</header>
<div class="content">
<div class="inner">Content HEre</div>
</div>
</div>
关于css - 如何在 HTML 中实现带有页眉布局的 ScrollView ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35797422/