我正在使用Bootstrap制作网页,从顶部的水平导航栏开始,然后是带有背景图像和一些文本的div。然后,在此封面之后放置各种容纳文本的容器。

我希望带有封面的div填充窗口上的剩余空间,即,当您加载页面时,您只会看到导航栏,其后是封面,直到滚动(如http://www.dagconseil.com/一样,但我的封面除外)与导航栏不重叠)。

到目前为止,如果我将相应的div(.home-cover)的位置设置为relative,则我得到的封面仅是文本标题的大小:

html - 使导航栏下的Div填满所有空间-LMLPHP

或覆盖整个页面直至结尾的图像(如果我使用绝对定位):

html - 使导航栏下的Div填满所有空间-LMLPHP

这也不是我想要的。

这是CSS的相关部分:

html {
  position: relative;
  min-height: 100%;
}

.navbar {
  top: 0;
  left: 0;
  width: 100%;
}

.home-cover {
  position:relative;
  height:100%;
  min-height:100%;
  width:100%;
  color: rgb(48,69,151);
}

.home-cover::before {
  height:100%;
  min-height:100%;
  width:100%;
  content: "";
  background-position:center center;
  z-index:0;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size:cover;
  -o-background-size: cover;
  overflow:hidden;
  background-image: url("img/home-cover.jpg");
  opacity: 0.4;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

.home-cover-header {
  position: relative;
  text-align: center;
  width: 100%;
}


以及HTML页面的部分:

<nav class="navbar navbar-light navbar-expand-sm flex-nowrap">
    <!-- nav bar content -->
</nav>
<div class="home-cover">
  <div class="home-cover-header">
    <h1>MY AWESOME AGENCY</h1>
    <br><br><br><br>
    <h2>BRAND CONTENT STRATEGY</h2>
  </div>
</div>
<div class="container-large-padding container">
    <!-- rest of the content -->
</div>

最佳答案

抱歉,如果我错过了您的行程,我已经更新了代码,我已经尝试过了,并且可以正常工作。 PS将.home-cover-header设为绝对。而不是图像本身(.home-cover)。现在试试这个HTML部分

<div class="home-cover">
</div>
<div class="home-cover-header">
    <h1>MY AWESOME AGENCY</h1>
    <br><br><br><br>
    <h2>BRAND CONTENT STRATEGY</h2>
</div>


至于css,

.home-cover-header{
position:absolute;
top :10%;
}
.home-cover {
      position:relative;
      height:100%;
      padding:25%;
      min-height:100%;
      width:100%;
      color: rgb(48,69,151);
      background-image: url("img/home-cover.jpg");
      opacity: 0.8;
    }


P.s请不要忘记提供填充,因为div本身是空的。

09-11 19:06
查看更多