视口高度 (vh) 不适用于位置粘性

Question

我已经建立了一个画廊布局。每个<div class="gallery">部分填充视口。这是它没有粘性标题的外观。使用此方法，布局按预期工作。

body {
margin: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
header,
footer {
padding: 48px;
color: #fff;
background-color: #000;
}
.gallery {
display: flex;
height: 100vh;
}
.gallery figure {
flex: 1;
margin: 0;
}
.gallery figure img {
display: block;
/* Make images responsive */
height: auto;
max-width: 100%;
/* Fill .gallery width and height */
width: 100%;
height: 100vh;
object-fit: cover;
}

<header>
<span>Header</span>
</header>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<footer>
<span>Footer</span>
</footer>

接下来，我添加了一个粘性标头，如下所示。

body {
margin: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
header,
footer {
padding: 48px;
color: #fff;
background-color: #000;
}
header {
position: sticky;
top: 0;
}
.gallery {
display: flex;
height: calc(100vh - 120px);
}
.gallery figure {
flex: 1;
margin: 0;
}
.gallery figure img {
display: block;
/* Make images responsive */
height: auto;
max-width: 100%;
/* Fill .gallery width and height */
width: 100%;
height: 100vh;
object-fit: cover;
}

<header>
<span>Header</span>
</header>
<div class="gallery">

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

</div>
<div class="gallery">

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

</div>
<footer>
<span>Footer</span>
</footer>

为了解释粘性标头，我在.gallery中添加了height: calc(100vh - 120px);。这适用于第一个.gallery父，但最后一个父.gallery发生了一些时髦的事情。如您所见，页脚重叠。

编辑

如果您检查粘性标头示例<figure>，您会注意到它正确计算了高度。例如，在 1366x768 的分辨率下，<figure>的高度为 648 像素(768 像素 - 120 像素(。但是，<a>和<img>元素显示的高度为 768px。

我该如何解决这个问题？

Answer 1

根据我的编辑，问题在于<a>和<img>元素未包含在<figure>元素中。我已经通过在.gallery figure a和.gallery figure img中添加height: 100%;来解决此问题。

body {
margin: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
img {
height: auto;
max-width: 100%;
}
header,
footer {
padding: 48px;
color: #fff;
background-color: #000;
}
.gallery {
display: flex;
height: 100vh;
}
.gallery figure {
flex: 1;
margin: 0;
}
.gallery figure a,
.gallery figure img {
display: block;
height: 100%; /* Fills the height of <figure> */
}
.gallery figure img {
object-fit: cover;
}

<header>
<span>Header</span>
</header>
<div class="gallery">

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

</div>
<div class="gallery">

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>

</div>
<footer>
<span>Footer</span>
</footer>