Question

我已经成功地使用了很多次视口高度，但这一次给我带来了问题，我不知道为什么。您可以在以下网页上看到我的问题：http://staging.chinahiking.cn/great-wall-hiking/wild-jinshanling-to-restored-jinshanling-great-wall-hike-1day/

.top-container.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.viewport-height {
  height: 80vh;
}

<body>
  <div class="top-container sticky"></div>
  <div class="content">
    <div class="viewport-height"></div>
    <div class="description-container"></div>
  </div>
</body>

但是由于某些原因，视口高度没有注册。而且，当我更改屏幕高度时，.description-container中的内容与我的.viewport-height容器中的内容重叠。有谁知道为什么会这样，我如何才能将视口高度容器中的内容设置为80vh或100vh？

Answer 1

将其设置为高度会自动解决您的问题，因为即将出现容纳问题

.description-section-divider {
    height: auto;
}

如果您需要一些空格，请根据需要添加一些填充，否则，如果您想使用height：287px进行修复，则需要编写媒体查询以获取更好的建议，并选择height：auto;

视口高度不起作用，调整窗口大小时底部div中的内容重叠

1 个答案: