我正在尝试创建底部带有页脚的全屏 slider 。使 slider 全屏显示很容易，但向其添加“页脚”似乎并不容易(对我而言)。例如， slider 将包含一张照片，其下方的 div 将包含有关照片的详细信息，所有这些都应显示为“着陆页”，而无需在所有设备上滚动。

我的大脑告诉我创建一个 100vh 的包装容器来填充 100% 的 View 高度，然后创建页脚 - 对于这个例子 - 在 150px 的设置高度，然后让 slider 填充剩余的差异留在包装器容器中，这在理论上似乎是正确的，但我似乎无法弄清楚如何在不使用脚本的情况下真正做到这一点。我对脚本没有意见，只是想知道是否有一种纯 css 方式来完成我想要完成的事情。

在这个具体的例子中，我已经尝试在底部为 0 的页脚 div 上进行绝对定位，以紧贴主包装器的底部，这有点有效(由于底部导航栏，在移动设备上尤其是 iPhone 上不稳定)，但是自然地，由于绝对位置的工作方式，在 slider div 上设置 100% 高度将忽略页脚 div 并将其高度设置为包装容器的 100%。

是否可以设置 bottom: 0，但 slider div 不与绝对定位的页脚 div 重叠？

有没有更好的方法来使用纯 css 一起完成这一切？我是不是疯了？

这是我正在努力完成的图表

建议前的原始代码

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>test page</title>
  <meta name="description" content="test page">
  <meta name="author" content="Test">

  <style>
  body {
    margin: 0px;
  }
  .page-wrapper {
    height: 100vh;
    background-color: red;
  }
  .slider {
    height: 100%;
    background-color: blue;
  }

  .slider-footer {
      height: 150px;
      background-color: green;
      position: absolute;
      bottom: 0;
      width: 100%;
  }
  </style>

</head>

<body>
  <div class="page-wrapper">
      <div class="slider">
      </div>
      <div class="slider-footer">
      </div>
  </div>
</body>
</html>

更新/编辑

此外，如下所示，.slider 上的 calc(100vh -150px) 效果更好。它在桌面上运行得非常好，但在我的 iPhone 上运行时，就不是那么好了。

更新样式代码

 <style>
  body {
    margin: 0px;
  }
  .page-wrapper {
    height: 100vh;
    max-height: 100vh;

    background-color: red;
  }
  .slider {
    background-color: blue;
    height: calc(100vh - 150px);
    max-height: calc(100vh - 150px);
  }

  .slider-footer {
      height: 150px;
      background-color: green;
      position: absolute;
      bottom: 0;
      width: 100%;
  }
  </style>

由于设备上 safari 的导航按钮较低，iPhone 似乎会自动调整 View 。看起来它将 .page-wrapper 向下拉伸(stretch)得比它应该的更远。我试图通过向 .page-wrapper 添加 max-height: 100vh 来防止这种情况，但这似乎根本没有做任何事情

这是该页面在 iPhone 上的样子

一切看起来都很好，就像他们应该的那样......

直到你向下滚动

那就是事情变得有点奇怪的时候......

看起来，至少在 iPhone 上的 safari 上，100vh 正在考虑底部导航栏，但 slider.footer 的绝对定位忽略它并将其自身设置为 safari 底部导航栏的顶部。我明白为什么苹果会这样做，因为默认情况下导航栏始终存在，直到您向下滚动，但它显然导致了我正在尝试完成的问题......

我认为这是 iPhone/Safari 的问题是否正确，还是我的 html/css 技能还差得远？

最佳答案

我会做类似的事情:

.slider {
    height: calc(100vh - 150px);
}

希望这有帮助:)

关于html - 绝对定位不会溢出到另一个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42777412/

html - 绝对定位不会溢出到另一个div