html - 高度似乎无法在 Chrome 77 上正常工作

Question

我有一个页面可以在 Firefox 上正常运行，但不能在 Chrome 77 上运行。

#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  height: 100px;
  display: block;
  background-image: linear-gradient(lightblue, rgb(61, 133, 214));
}

#main-section {
  flex-grow: 1;
  background: url("https://picsum.photos/id/15/1000/1000");/* any image you want */
  background-repeat: no-repeat;
  background-size: cover;
}

#main-section-background {
  min-height: 100%;
  height: auto !important;
  background-color: #ffffff;
  opacity: 0.9;
}

.main-content {
  min-height: 100%;
  height: auto !important;
  display: flex;
  justify-content: space-evenly;
}

footer {
  height: 100px;
  background-image: linear-gradient(lightblue, rgb(61, 133, 214));
}

<div id="container">
  <header>
  </header>

  <section id="main-section">
    <div id="main-section-background">
      <div class="main-content">
      </div>
    </div>
  </section>

  <footer>
  </footer>
</div>

背景图像不透明度适用于 Firefox。对于 chrome，height 和 min-height 属性没有任何效果，不透明度也不可见。 我尝试了几种方法来强制调整内容的高度，但看起来 Chrome 只在实际的 HTML 内容上应用了不透明度(为清楚起见未放在这里)。

Answer 1

您可以优化您的代码，只保留应用多重背景的main-section:

#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  height: 100px;
  display: block;
  background-image: linear-gradient(lightblue, rgb(61, 133, 214));
}

#main-section {
  flex-grow: 1;
  background: 
    linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9)),
    url("https://picsum.photos/id/15/1000/1000");/* any image you want */
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: space-evenly;
}

footer {
  height: 100px;
  background-image: linear-gradient(lightblue, rgb(61, 133, 214));
}

body {
 margin:0;
}

<div id="container">
  <header>
  </header>

  <section id="main-section">
    
  </section>

  <footer>
  </footer>
</div>