尽管高度: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>

更多信息：

• 一些信息。
• 文档。
• 不能吗？

更烦人的方式...

您必须在每个元素上放置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 */
}

卡诺斯