css - 如何使用 css 将 div 修复放在页面底部 && 页脚上方

Question

我有一个盒子(购物车)，我希望将其固定在页面底部。 但如果页面不够长，或者用户滚动到页面末尾，从而使页脚位于视口(viewport)中。在本例中，我希望购物车框位于页脚正上方。

不用JS可以做到这一点吗？

谢谢

Answer 1

回答只是为了好玩，你应该依靠 javascript 来使其可靠。

position:sticky、 float 伪值和display重置可能存在危险的技巧。

aside,
footer {
  position: sticky;
  bottom: 0;
  background: white;
  border: solid;
  clear: both;
  z-index: 1;
}
footer {
  z-index: 0;/*hide it from aside */
}
html:before {/* push sticky elements down */
  content: "";
  float: left;
  height: 100vh;
}
body {
margin:0;
  display: inline;/* get body scrolling and block formatting context off the game */
}

<main>main<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> end main</main>
<aside>aside at bottom !</aside>
<footer>footer</footer>

您可以玩一下并测试 it与内容，但请记住，它不可靠，粘性不是在任何地方都实现的，并且行为可能因浏览器而异，以最有趣和意想不到的方式从更新到另一个浏览器。