Flexbox与其他flexbox重叠
Flexbox与其他flexbox重叠
提问于 2018-08-09 05:46:51
我是Stack Overflow的新手，在使用flexbox时遇到了问题。
我想使用带有display: flex;的<main>和<footer>，其中main的每一行都有2列，带有浏览器的height: 100%，页脚有2行，第一行有3列，第二行只有一列，都有height: auto;
但当我这样做时，我的页脚与<main>重叠，因为它的高度是100%，但我需要它为100%的孩子服务。我说清楚了吗？
@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>
回答 2
Stack Overflow用户
发布于 2018-08-09 09:22:11
这是我为你的布局提供的解决方案。
<!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>
谢谢你，T04435。
Stack Overflow用户
发布于 2018-11-23 23:21:38
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51756099
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号