html - 如何使用 CSS 网格正确制作页面布局?
问题描述
下面是我尝试使用网格进行页面布局。但是,滚动条位于标题下方。
而不是占据页面的整个高度。
发生这种情况是因为我添加overflow:auto
了部分标签。由于我对使用网格布局不够熟悉,我不确定如何使用网格正确实现页面布局。有没有解决的办法?有没有更好的解决方案来实现我想要做的事情?
body {
font-size: 24px;
height: 100vh;
margin: 0;
display: grid;
grid-template-columns: minmax(150px, 200px) auto;
grid-template-rows: 54px auto;
grid-template-areas: "header header"
"nav section";
}
header {
grid-area: header;
background: red;
}
nav {
display:flex;
flex-direction: column;
justify-content: space-between;
grid-area: nav;
background: blue;
}
section {
grid-area: section;
background: yellow;
overflow:auto;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<body>
<header>
header
</header>
<nav>
<div>
navigation
<br> I'm at the top
</div>
<div>
I'm at the bottom
</div>
</nav>
<section>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
</section>
</body>
</html>
解决方案
要显示其他可能性,请查看以下示例:
body {
font-size: 24px;
min-height: 100vh;
margin: 0;
display: grid;
grid-template-columns: minmax(150px, 200px) auto;
}
header {
background: red;
position: fixed;
height: var(--header-height);
width: 100%;
}
nav {
grid-column: 1;
display:flex;
flex-direction: column;
justify-content: space-between;
background: blue;
margin-top: var(--header-height);
}
section {
background: yellow;
overflow:auto;
grid-column: 2;
margin-top: var(--header-height);
}
:root {
--header-height: 54px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<body>
<header>
header
</header>
<nav>
<div>
navigation
<br> I'm at the top
</div>
<div>
I'm at the bottom
</div>
</nav>
<section>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
section
<br>
</section>
</body>
</html>
推荐阅读
- html - 位置的z-index:固定?
- tensorflow-federated - TFF 占用大量 CPU
- deployment - Heml 检查 If nil 指针
- python - Python:显示字典单词的匹配键
- asp.net-mvc - 试图列出与预定班级在同一班级注册的学生
- node.js - 使用 React 的登录令牌
- perl - MS-DOS 输出应打印在 *txt 文件上
- css - 使用 css-grid 强制 div 占据剩余空间
- angular - Angular Material 的带有动态节点的嵌套树的意外行为
- javascript - 如果选择了选项(做某事),如何在我的情况下使用