视口高度（vh）在位置粘滞下不起作用

debugcn 发表于 Dev

山姆

我已经建立了一个画廊布局。每个<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>和<img>元素显示的高度为768px。

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

山姆

按我的编辑，问题出在了<a>和<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-2

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

视口高度（vh）在位置粘滞下不起作用

视口高度（vh）在位置粘滞下不起作用

视口元标记不起作用

媒体查询和视口不起作用

位置粘滞在带溢出的flexbox上不起作用

HTML CSS位置粘滞选项不起作用

PHP在位置指令中不起作用

在位置“相对”的 div 中移动 div 不起作用

根据视口高度及其位置自动计算div的高度

Android 4.1视口缩放（setInitialScale，元初始缩放不起作用）

libGDX舞台无响应，新的完全白度，视口不起作用

WKWebView视口缩小到适合在iOS 9.3上不起作用

Bootstrap 4词缀的备用位置：粘滞在卡片上不起作用

为什么百分比高度在位置固定元素上起作用？

为什么这个高度为100vh的div无法覆盖整个视口？

iOS 7.1最小用户界面导致视口高度CSS单元（VH）出现问题

CSS视口高度：100vh无法正确处理div中的内容

在 CSS 中使用“视口高度/vh”时，它是否包含“浏览器书签栏”？

React Native-TouchableOpacity在位置为绝对的容器上不起作用

平板电脑/手机中的错误，css 100vh高度不起作用

子div位置的绝对父级高度不起作用

div位置绝对高度不起作用

我的媒体查询在移动设备中不起作用，并且我已经添加了视口

Android Chrome大字体错误/缩放错误/元视图视口设备宽度不起作用

我的媒体查询在移动设备中不起作用，并且我已经添加了视口

reactstrap <UncontrolledDropdown> 正在脱离视口，mr/ml-auto 和 float-right/left 不起作用

ScrollView在全屏模式下不起作用

Flask调试在Anaconda下不起作用

fabs（）在模块下不起作用

在IISExpress下不起作用的路径

变量在条件下不起作用