图像填充完整的div而不是填充标题下方的空间

Question

我试图在带有图像的容器中填充标题下面的空格。问题是图像用图像填满整个容器，而不是标题位置和停止。

这是我的代码：

.container {
  height: 100vh;
}

.showcase {
  background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/innovative_background.jpeg);
  background-position: center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100vh;
  background-size: cover;
}

header {
  background: rgba(255, 255, 255, 0);
  min-height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 20;
  transition: 0.35s all ease;
  border-bottom: solid #cb5057;
}

<div class="container">
  <header>
    <ul>
      <li>link1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Contact Us</li>
    </ul>
  </header>
  <div class="showcase"></div>
</div>

我只想让图像将剩余的div填充到header元素中。如果您有任何提示或解决方案，请告诉我。

谢谢！

Answer 1

由于标题是固定的，因此下面的内容需要padding-top或margin-top，其值与标题高度相同。

检查以下代码

.container
{
   height: 100vh;
}

.showcase {
  background: linear-gradient(
      rgba(0, 0, 0, 0.6), 
      rgba(0, 0, 0, 0.6)),
    url(../img/innovative_background.jpeg);
  background-position: center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100vh;
  background-size: cover;
}

header {
  background: rgba(255, 255, 255, 0);
  min-height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 20;
  transition: 0.35s all ease;
  border-bottom: solid #cb5057;
  background: white;
}

.showcase img {
  padding-top: 100px;
  width: 100%;
}

 <div class="container">
            <header>
                <ul>
                    <li>link1</li>
                    <li>Link 2</li>
                    <li>Link 3</li>
                    <li>Contact Us</li>
                </ul>
            </header>
    <div class="showcase">
      <img src="http://www.fillmurray.com/1200/1200" alt="">
    </div>
</div>

Answer 2

只需将background: #fff（或您喜欢的任何颜色）应用到header，否则它是透明的，并且由于它已修复，您会在其下方看到.showcase背景图片

.container {
  height: 100vh;
}

.showcase {
  background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(http://placehold.it/500x800/0af);
  background-position: center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100vh;
  background-size: cover;
}

header {
  background: rgba(255, 255, 255, 0);
  min-height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 20;
  transition: 0.35s all ease;
  border-bottom: solid #cb5057;
  background: #fff;
}

<div class="container">
  <header>
    <ul>
      <li>link1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Contact Us</li>
    </ul>
  </header>
  <div class="showcase"></div>
</div>