如何让用纯CSS来做头部固定,内容区域滑动的页面布局?
2021-09-18大约2分钟
网页的头部固定,内容区域有scrollbar的布局比较常见。这个布局的核心是要scrollbar只出现在内容所在的框里,整个页面的高度是和浏览器的高度一样的。
<html>
<head>
<style>
body {
box-sizing: border-box;
margin: 0;
}
.root {
height: 100vh;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow-y: hidden;
}
.banner {
border: 1px solid aliceblue;
padding: 5px 10px;
box-sizing: border-box;
}
.head {
border: 1px solid aquamarine;
padding: 20px 10px;
box-sizing: border-box;
}
.main {
box-sizing: border-box;
display: flex;
width: 100%;
height: 500px;// 100%;
flex-direction: row;
border: 1px solid darkblue;
overflow: auto;
}
.nav {
box-sizing: border-box;
border: 1px solid crimson;
padding: 10px;
}
.content {
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: auto;
border: 1px solid royalblue;
padding: 5px 10px;
margin: 0;
}
</style>
</head>
<body>
<div class="root">
<div class="banner">通知</div>
<div class="head">header</div>
<div class="main">
<div class="nav">
Nav
</div>
<div class="content">
<div class="very-long-content">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
</div>
</div>
</body>
</html>
在这个例子里,比较重要的是要固定网页最外层的div的高度。我们用height: 100vh;
来确保外层的高度,然后内层就可以依据这个高度来布局了。
.root {
height: 100vh;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow-y: hidden;
}
请注意.main的高度在例子里为了展示的需要,高度设置成了500px,实际的情况下,应该设置成100%。