元素不会覆盖整个屏幕尽管身高：100％

Question

我是一个网站，我有两个并排的图片，这些图片是指向其他页面的链接。对于这两个图像，希望它们都覆盖整个屏幕（顶部的导航栏除外）。我试图使高度：100％用于多个元素，但它不会改变任何东西。

HTML：

<div id="container">
    <div id="body">
        <div class="content-row">
            <div class="content-container">
                <a href="theteam.html">
                    <img src="assets/team-photo.JPG">
                    <p class="center">The Team</p>
                </a>
            </div>
            <div class="content-container">
                <img src="assets/test.JPG">
                <p class="center">The Vehicle</p>
            </div>
        </div>
    </div>
</div>

CSS：

#container {
min-height:100%;
position:relative;
}

html, body {
font-family:futura;
height:100%;
margin:0;
padding:0;
color:(25,28,31);
}

.content-row {
display: flex;
max-height: auto;
}

.content-container {
width: 50%;
position: relative;
}

.content-container img {
width: 100%;
height:100%;
-webkit-transition: 0.75s ;
-moz-transition: 0.75s ;
-ms-transition: 0.75s ;
-o-transition: 0.75s ;
transition: 0.75s ; 
}

.content-container .center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
font-size: 400%;
color:rgb(255,255,255);
border-bottom: 5px solid rgba(255,255,255, 0);
-webkit-transition: border 0.75s ease;
-moz-transition: border 0.75s ease;
-ms-transition: border 0.75s ease;
-o-transition: border 0.75s ease;
transition: border 0.75s ease; 
}

.content-container:hover img {
animation-name: darken;
animation-iteration-count:1;
animation-duration: 0.75s;
filter: brightness(55%);
}

.content-container:hover .center {
border-bottom: 5px solid rgba(255,255,255, 1);
}

@keyframes darken {
from {filter: brightness(100%);}
to {filter: brightness(55%);}
}

任何建议要么是微小的，要么是极大的帮助。我是一个新手，这似乎超出了我的境界，所以我很感激你的帮助。

Answer 1

最简单的解决方案

使用100vh。

.content-container img {
  width: 100%;
  height: 100vh; /* instead of 100%;*/
}

#container {
  min-height: 100%;
  position: relative;
}

html,
body {
  font-family: futura;
  /*height: 100%;*/
  margin: 0;
  padding: 0;
  color: (25, 28, 31);
}

.content-row {
  display: flex;
  max-height: auto;
}

.content-container {
  width: 50%;
  position: relative;
}

.content-container img {
  width: 100%;
  height: 100vh; /* instead of 100% */
  -webkit-transition: 0.75s;
  -moz-transition: 0.75s;
  -ms-transition: 0.75s;
  -o-transition: 0.75s;
  transition: 0.75s;
}

.content-container .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 400%;
  color: rgb(255, 255, 255);
  border-bottom: 5px solid rgba(255, 255, 255, 0);
  -webkit-transition: border 0.75s ease;
  -moz-transition: border 0.75s ease;
  -ms-transition: border 0.75s ease;
  -o-transition: border 0.75s ease;
  transition: border 0.75s ease;
}

.content-container:hover img {
  animation-name: darken;
  animation-iteration-count: 1;
  animation-duration: 0.75s;
  filter: brightness(55%);
}

.content-container:hover .center {
  border-bottom: 5px solid rgba(255, 255, 255, 1);
}

@keyframes darken {
  from {
    filter: brightness(100%);
  }
  to {
    filter: brightness(55%);
  }
}

<div id="container">
  <div id="body">
    <div class="content-row">
      <div class="content-container">
        <a href="theteam.html">
          <img src="assets/team-photo.JPG">
          <p class="center">The Team</p>
        </a>
      </div>
      <div class="content-container">
        <img src="assets/test.JPG">
        <p class="center">The Vehicle</p>
      </div>
    </div>
  </div>
</div>

更多信息：

• Some info。
• Documentation。
• CanIUse?

更烦人的方式......

您必须将height: 100%放在每个元素上，从html到img，如下所示：

#container,
#body,
.content-row,
.content-container,
.content-container > a {
  height: 100%;
}

#container,
#body,
.content-row,
.content-container,
.content-container>a {
  height: 100%;
}

#container {
  min-height: 100%;
  position: relative;
}

html,
body {
  font-family: futura;
  height: 100%;
  margin: 0;
  padding: 0;
  color: (25, 28, 31);
}

.content-row {
  display: flex;
  max-height: auto;
}

.content-container {
  width: 50%;
  position: relative;
}

.content-container img {
  width: 100%;
  height: 100%;
  -webkit-transition: 0.75s;
  -moz-transition: 0.75s;
  -ms-transition: 0.75s;
  -o-transition: 0.75s;
  transition: 0.75s;
}

.content-container .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 400%;
  color: rgb(255, 255, 255);
  border-bottom: 5px solid rgba(255, 255, 255, 0);
  -webkit-transition: border 0.75s ease;
  -moz-transition: border 0.75s ease;
  -ms-transition: border 0.75s ease;
  -o-transition: border 0.75s ease;
  transition: border 0.75s ease;
}

.content-container:hover img {
  animation-name: darken;
  animation-iteration-count: 1;
  animation-duration: 0.75s;
  filter: brightness(55%);
}

.content-container:hover .center {
  border-bottom: 5px solid rgba(255, 255, 255, 1);
}

@keyframes darken {
  from {
    filter: brightness(100%);
  }
  to {
    filter: brightness(55%);
  }
}

<div id="container">
  <div id="body">
    <div class="content-row">
      <div class="content-container">
        <a href="theteam.html">
          <img src="assets/team-photo.JPG">
          <p class="center">The Team</p>
        </a>
      </div>
      <div class="content-container">
        <img src="assets/test.JPG">
        <p class="center">The Vehicle</p>
      </div>
    </div>
  </div>
</div>

注意：强烈建议您使用以下代码，以使边框不超出屏幕。：

* {
  box-sizing: border-box;
  vertical-align: top; /* For the <a> tags */
}

CanIUse