我是 Stack Overflow 的新手，我遇到了 flexbox 的问题。
我想使用 <main>和 <footer>与 display: flex;其中 main 的每一行都有 2 列 height: 100%浏览器和页脚有 2 行，第一行有 3 列，第二行只有一列，都带有 height: auto;。
但是当我这样做时，我的页脚会重叠 <main>因为它的高度是 100%，但我需要 100% 的 child 。我清楚了吗？
@font-face {
font-family: "Open Sans";
src: url(../fonts/OpenSans-Regular.ttf);
}
@font-face {
font-family: "Time Burner";
src: url(../fonts/TimeBurner-Regular.ttf);
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Open Sans";
scroll-behavior: smooth;
}
main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.flex {
height: 100%;
flex-basis: 50%;
box-sizing: border-box;
padding: 20px;
}
.home {
background-attachment: fixed;
background-image: url("../img/bg.jpg");
background-position: 50%;
background-size: cover;
}
.flex:nth-child(even) {
border: 5px solid blue;
}
.flex:nth-child(odd) {
border: 5px solid red;
}
.arrow {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
width: 200px;
height: 50px;
background-color: gray;
text-align: center;
}
footer {
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.footer {
flex-basis: 100%;
height: auto;
}
.thumb {
position: fixed;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: gray;
right: 20px;
bottom: 20px;
}
@media (max-width: 768px) {
.flex {
flex-basis: 100%;
}
.arrow {
bottom: -100%;
}
}<!DOCTYPE html>
<html>
<head>
<!-- ¿Qué hacés en mi código? ¿Te gustó algo?
Bueno, como sea, que tengas una linda visita :) -->
<meta charset="UTF-8">
<title>OnePage</title>
<meta name="theme-color" content="#34a853" />
<meta name="viewport" content="width=device-width" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="icon" href="img/favicon.png" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/dist/css/bootstrap.css" />
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<main>
<section class="flex home" id="inicio">
1 - Izquierda
</section>
<section class="flex home">
2 - Derecha
</section>
<a class="arrow" href="#3">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</a>
<section class="flex" id="3">
3 - Izquierda
</section>
<section class="flex">
4 - Derecha
</section>
</main>
<footer>
<section class="flex footer">
5 - Footer
</section>
</footer>
<a class="thumb" href="#inicio">
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
</a>
</body>
</html>最佳答案
这是我的布局解决方案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
main,
footer {
display: flex;
flex-wrap: wrap;
}
.main-item {
flex:0 1 50%;
height: 100vh;
background-color: tomato;
}
.footer-item {
flex: 1;
background-color: lightsalmon;
}
.footer-item:last-child {
flex: 0 0 100vw;
background-color: blue;
}
</style>
<body>
<main>
<div class="main-item">m1</div>
<div class="main-item">m2</div>
<div class="main-item">m3</div>
<div class="main-item">m4</div>
</main>
<footer>
<div class="footer-item">f1</div>
<div class="footer-item">f2</div>
<div class="footer-item">f3</div>
<div class="footer-item">f4</div>
</footer>
</body>
</html>谢谢(Gracias)，T04435。
关于html - Flexbox 与其他 Flexbox 重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51756099/