html - 视口高度（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>

为了说明粘性标题，我添加height: calc(100vh - 120px);了.gallery. 这适用于第一个.gallery父母，但最后一个父母发生了一些奇怪的事情.gallery。如您所见，页脚重叠。

编辑

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

我怎样才能解决这个问题？

标签： htmlcssflexbox

Answer 1

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

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>