div css 让内容自动铺满可视窗口高度
<!DOCTYPE html>
<html >
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
html,
body {
height: 100%;
margin: 0;
}
.parent {
display: flex;
flex-direction: column;
/* 垂直排列 */
height: 100vh;
/* 父容器占满视口 */
}
.fixed {
height: 50px;
/* 固定高度区域 */
}
.fill {
flex: 1;
/* 自动填充剩余高度 */
overflow: auto;
/* 内容溢出时滚动 */
background:#ccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="fixed">固定头部</div>
<div class="fixed">固定头部</div>
<div class="fixed">固定头部</div>
<div class="fixed">固定头部</div>
<div class="fill">
内容自动铺满剩余可视高度
<ul>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li><li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li><li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li><li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li><li>666666666666</li>
<li>666666666666</li>
</ul>
</div>
</div>
</body>
</html>
感谢分享 有用
发表评论