在不干扰页脚的情况下使部分占据全屏
在不干扰页脚的情况下使部分占据全屏
提问于 2021-02-14 02:53:06
我想让我的主标签中的一个部分占据整个屏幕，但当我这样做的时候，我的页脚覆盖了第一个部分之后的以下部分。如果没有将部分的高度设置为100vh的方法，我如何解决这个问题，因为我知道这会在移动设备上滚动时引发问题。
下面是一个示例代码：
* {
margin: 0;
padding: 0;
}
html,
body,
main {
height: 100%;
}
header {
background: yellowgreen;
padding: 5% 0;
position: fixed;
z-index: 2;
width: 100%;
}
.section1 {
height: 100%;
background-color: rgb(83, 200, 247);
}
.section2 {
background-color: pink;
}
.section3 {
background-color: red;
}
footer {
background: rgb(53, 53, 53);
color: white;
height: 10%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<header>
This is header.
</header>
<main>
<section class="section1">
This is Section 1.
</section>
<section class="section2">
This is Section 2.
</section>
<section class="section3">
This is Section 3.
</section>
</main>
<footer>
This is footer.
</footer>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2021-02-14 03:26:20
使用flexbox！它就是为这种东西而生的。注意，我们不指定截面的高度，而只指定容器的高度。这可以根据需要进行调整。
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
main {
flex-grow: 1;
display:flex;
flex-direction:column;
}
header {
background: yellowgreen;
padding: 5% 0;
height:10%;
z-index: 2;
width: 100%;
}
.section1 {
flex:1;
background-color: rgb(83, 200, 247);
}
.section2 {
flex:1;
background-color: pink;
}
.section3 {
flex:2;
background-color: red;
}
footer {
background: rgb(53, 53, 53);
color: white;
height: 10%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<header>
This is header.
</header>
<main>
<section class="section1">
This is Section 1.
</section>
<section class="section2">
This is Section 2.
</section>
<section class="section3">
This is Section 3.
</section>
</main>
<footer>
This is footer.
</footer>
</body>
</html>
Stack Overflow用户
发布于 2021-02-14 06:13:24
当我尝试使用flexbox时，同样的事情也发生了。我是否需要将页眉、主页和页脚部分包装在另一个div中？
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
main {
flex-grow: 1;
}
header {
background: yellowgreen;
padding: 5% 0;
z-index: 2;
width: 100%;
}
.section1 {
background-color: rgb(83, 200, 247);
}
.section2 {
height: 25%;
background-color: pink;
}
.section3 {
background-color: red;
}
footer {
background: rgb(53, 53, 53);
color: white;
height: 10%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<header>
This is header.
</header>
<main>
<section class="section1">
This is Section 1.
</section>
<section class="section2">
This is Section 2.
</section>
<section class="section3">
This is Section 3.
</section>
</main>
<footer>
This is footer.
</footer>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66188734
复制相关文章
相似问题
腾讯云开发者
