css - 如何使用CSS将div固定在页面底部&&页脚上方

Question

我有一个框(购物车)，我希望将其固定在页面底部。但是如果页面不够长，或者用户滚动到页面末尾，那么页脚就在视口(viewport)中。在这种情况下，我希望购物车框位于页脚的正上方。

没有 JS 可以做到这一点吗？

谢谢

Answer 1

只为好玩而回答，您应该依靠 javascript 使其更可靠。

position:sticky、floating pseudo 和 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有内容，但请记住，它不可靠，粘性并未在所有地方实现，并且行为可能因浏览器而异，从更新到另一个以最有趣和意想不到的方式变化。