Question

我有三个弹性箱容器（header，.content__description和footer），其中两个（header和.content__description）不适合孩子们的Chrome中的高度，但仅限于Firefox。因此，第一个容器被第二个容器覆盖。它为什么会发生？

/* util.css */

.break {
  width: 100%;
}

/* An issue 
html,
body {
  height: 100%;
}
*/

/* The solution I found */
html {
  height: 100%;
}
body {
  min-height: 100%;
}

/* Other styles */
body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: rgb(255, 255, 255);
  background-color: rgb(20, 142, 210);
}
header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 3em;
  margin-bottom: 3em;
}
.header__logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-bottom: 1em;
}
.header__logo img {
  width: 3em;
  height: 3.3em;
  margin-right: 0.6em;
}
.header__logo span {
  font-size: 5em;
  font-weight: 400;
}
.header__slogan {
  font-size: 1.5em;
  font-weight: 400;
  text-align: center;
}
.content {
  margin-left: auto;
  margin-right: auto;
}
.content__description {
  display: flex;
  flex-direction: column;
  padding-top: 3em;
  padding-bottom: 3em;
  background-color: rgb(0, 114, 174);
  position: relative;
}
.content__description__signin {
  position: absolute;
  text-decoration: none;
  text-align: center;
  color: black;
  background-color: rgb(254, 190, 0);
  box-sizing: border-box;
  font-size: 2em;
  border: 0.2em rgb(255, 255, 255) solid;
  line-height: 1em;
  width: 6em;
  padding: 0.2em;
  top: calc(100% - 0.9em);
  left: calc(50% - 3em);
}
.content__description__signin:hover {
  background-color: rgb(241, 177, 0);
}
.content__description__strep {
  width: 13em;
  text-align: center;
  font-size: 2em;
  box-sizing: border-box;
}
.content__description__strep img {
  width: 5em;
  height: 5em;
  border: 0.2em rgb(255, 255, 255) solid;
  border-radius: 50%;
  box-shadow: 0.2em 0.5em 1em rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  margin-bottom: 1em;
}
.content__description__strep figcaption {
  background-color: rgb(2, 98, 148);
  padding: 1em;
  margin-left: -1em;
  margin-right: -1em;
}
footer {
  flex-grow: 1;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  min-height: 1.8em;
}

<body>
  <header>
    <div class="header__logo">
      <img src="images/logo.svg" alt="logo">
      <span>Sailing</span>
    </div>
    <span class="break"></span>
    <h1 class="header__slogan">You can!</h1>
  </header>
  <div class="content">
    <div class="content__description">
      <figure class="content__description__strep">
        <img src="images/meeting.jpg" alt="meeting">
        <figcaption>Talking</figcaption>
      </figure>
      <figure class="content__description__strep">
        <img src="images/sailing.jpg" alt="sailing">
        <figcaption>Sailing</figcaption>
      </figure>
      <figure class="content__description__strep">
        <img src="images/cinema.jpg" alt="cinema">
        <figcaption>Watching</figcaption>
      </figure>
      <a href="index.html" class="content__description__signin">Sign in</a>
    </div>
  </div>
  <footer>&nbsp;</footer>
</body>

编辑＃1

.content__description的显示样式更改为“flex”（错误打印）。

编辑＃2

我找到了解决方案 - 将body {height: 100%}切换为body {min-height: 100%}。它对我来说很完美。

Flexbox容器不适合Chrome中儿童的身高

0 个答案: