html - 如何让 2 个部分在网格中用页眉/主/页脚填充整页
问题描述
大家好,
我需要帮助,我希望有 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 {}
标题隐藏了?
对不起,我的英语不好。
你能帮我吗,祝你有美好的一天!
解决方案
*{
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 屏幕或视口的高度。我也修复了您的“位置:已修复”问题。现在您可以滚动并且您的标题将可见。您可以通过修复标题的宽度和高度来实现这一点,就像我已经修复的那样。
推荐阅读
- c# - 基于 Tag 选择 XmlNode 的子节点
- javascript - 在 NodeJS 中使用转换/双工流
- android - operator "it" in kotlin. PopupMenu(this, it)
- python - Python,在其他列表的元素上拆分输入字符串并从中删除数字
- function - si的haskell函数
- android - Robotium 还在开发中吗?
- android - Firebase Cloud Messaging via Cloud Functions via Http requests
- java - 数据未添加到 list.add
- android - 部分不可编辑的多行编辑文本,例如填写空白
- swift - 如何将 SecondViewController 上的 UISlider 值传输到 FirstViewController 上的 Alarm?