Question

我是Stack Overflow的新手，而flexbox则有问题。

我想在<main>中使用<footer>和display: flex;，其中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>

Answer 1

这是我为您设计的解决方案。

<!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。

Answer 2

将最低身高放在身体上的100％
移除身高：100％离开身体

Flexbox与其他Flexbox重叠

2 个答案: