大家好，
我需要幫助，我希望有 2 個部分，我<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 {}我的頭被隱藏？
對不起，我的英語不好。
你能幫我嗎，祝你有美好的一天！
uj5u.com熱心網友回復：
- 首先擺脫所有
height: 100%在任何情況下它們都不會與您的宣告一起使用的內容。 - 這里不需要網格。
- 只需添加：
.one { height: calc(100vh - 100px); - 添加
.two { height: calc(100vs - 200px);以減去頁腳和頁眉高度。 - 添加：
header { position: sticky; }。默認情況下，這不會將標題移出流。不過它會堅持到頂部。
由于您的頁腳和頁眉都有 100 像素的固定高度，您可以使用 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>uj5u.com熱心網友回復：
*{
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>您可以使用屬性 height: 100vh; 設定任何 div 的高度視口的高度。100vh 用于固定元素的高度或 div 螢屏或視口的高度。我也解決了您的“位置：固定”問題。現在您可以滾動并且您的標題將可見。您可以通過固定標題的寬度和高度來實作這一點。
uj5u.com熱心網友回復：
在這種情況下，您可以輕松地更改percentage為vh截面one和截面two類中的單位。就是這樣 ！您可以在此處閱讀有關單位的更多資訊。設定position: sticky并top: 0在header選擇器上，使您的導航如您所愿；)
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/338621.html
下一篇：使用位置時保持寬度：固定