Question

所以我有一个div想要位于我的页面底部，div的主体完全隐藏在用户的视口下方，除了整个标题固定在底部页面。

约束上：

整个div的高度是动态的，因为那里可以有任意数量的项目
div的标题完全包含在div中，语法明智

理想情况下，我希望使用CSS完全执行此操作，但如果需要一点JavaScript，那也很好。

关于如何做到这一点的任何想法？ position: fixed和bottom: (height of header - height of div)无法正常工作，因为在调整视口大小时div的高度会发生变化。

the thing i want to do

Answer 1

想出来。这是我的解决方案。关键是要有一个与你想要伸出的标题高度相同的包装器，并将固定位置和底部0应用于该父包装器。

HTML

<html>
<body>
<div class="wrapper">
  <div class="wrapper-top">
  </div>
  <div class="wrapper-bottom">
    This can be variable height
  <div>
</div>
</body>
</html>

CSS

.wrapper {
  height: 50px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.wrapper-top {
  height: 50px;
  width: 100%;
}

CSS - 页面底部隐藏的div但可见标题

1 个答案: