大家好，
我需要帮助，我希望<main>中有两个部分，我希望第一个部分填满整页，如果我滚动，我希望第二个部分再次填满整页。所以我测试了这个：
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
}
header,
footer {
height: 100px;
background-color: rgba(0,0,0,0.7);
}
header {
}
main {
}
section {
display: block;
background: #CFF;
}
.one {
background: red;
height: 100%;
}
.two {
background: cyan;
height: 100%;
}<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<header></header>
<main>
<section class="one"></section>
<section class="two"></section>
</main>
<footer></footer>
</div>
</body>
</html>正如你所看到的，我的页脚在第一节的底部，但我希望他在第二节的真正底部。如果可能的话，我想修复我的头，但如果我把position : fixed;放在header {}中，我的头会被隐藏？？
抱歉我英语不好。
你能帮帮我吗，祝你今天愉快！
- 首先去掉所有的
height: 100%，在任何情况下，它们都无法使用您的声明 - 这里不需要网格
- 只需添加：
.one { height: calc(100vh - 100px); - 添加
.two { height: calc(100vs - 200px);以同时减去页脚和页眉高度 - 添加：
header { position: sticky; }。默认情况下，这不会将标头移出流。不过它会粘在顶部
由于页脚和页眉的固定高度都是100px，因此可以使用calc函数来调整这两个部分的大小。
html, body {
margin: 0;
}
header,
footer {
height: 100px;
background-color: rgba(0,0,0,0.7);
}
header {
position: sticky;
top: 0;
}
section {
display: block;
background: #CFF;
}
.one {
background: red;
height: calc(100vh - 100px);
}
.two {
background: cyan;
height: calc(100vh - 200px);
}<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<header></header>
<main>
<section class="one"></section>
<section class="two"></section>
</main>
<footer></footer>
</div>
</body>
</html>*{
margin:0;
padding:0;
}
header {
position: fixed;
height: 20vh;
width: 100vw;
z-index: 1;
background-color: black;
}
section {
display: block;
background: #CFF;
}
.one {
top:20vh;
background: red;
height: 100vh;
}
.two {
background: cyan;
height: 100vh;
}
footer{
height: 20vh;
background-color: blue;
}<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<header>434343</header>
<main>
<section class="one"></section>
<section class="two"></section>
</main>
<footer></footer>
</div>
</body>
</html>您可以使用属性高度：100vh；设置任意div的高度视口的高度。100vh用于将元素或div的高度固定为屏幕或视口的高度。我已经修复了你的"；位置：固定；问题也是如此。现在您可以滚动，您的标题将可见。你可以通过像我固定的那样固定你的收割台的宽度和高度来实现这一点。
在这种情况下，您可以很容易地将one节和two节类中的percentage更改为vh单元。就是这样！在这里你可以阅读更多关于单位的信息。在header选择器上设置position: sticky和top: 0，使您的导航工作如您所愿；)
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
}
header,
footer {
height: 100px;
background-color: rgba(0,0,0,0.7);
}
header {
position: sticky;
top: 0;
}
main {
}
section {
display: block;
background: #CFF;
}
.one {
background: red;
height: 100vh;
}
.two {
background: cyan;
height: 100vh;
}<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<header></header>
<main>
<section class="one"></section>
<section class="two"></section>
</main>
<footer></footer>
</div>
</body>
</html>