如何在父元素

Question

我有一个内容列和粘性侧边栏的布局。向下滚动页面我需要在内容列的末尾停止侧边栏。

这里是我正在使用的HTML和CSS：

<div class="container">
  <div class="content">Content</div>
  <div class="sidebar">Sidebar (sticky)</div>
  <div style="clear:both"></div>
</div>


.content{
  float: right;
  width: 80%;
  margin-left: 20%;
}

.sidebar {
  float: left;
  width: 20%;
  position: -webkit-sticky;
  position: sticky;
  bottom: 30px;
}

同样在https://codepen.io/anon/pen/awNorj

我哪里错了？

Answer 1

您最初的问题是css技巧适用于顶级元素，但不适用于底部元素。因为技巧依赖于左上角的位置。要在左下角执行此操作，您需要知道侧边栏的高度。

使用粘性顶部元素，您可以：

• 首先放置侧栏div
• 然后是您的内容div
• 最后设置了侧边栏float:left，以便容器将其高度调整为内容

演示：https://jsfiddle.net/1owyqtcn/1/

使用粘性底部元素，float:left技巧不起作用：它会让您的侧边栏溢出底部的容器。

演示：https://jsfiddle.net/d1byrhp6/4/

如果您不知道侧边栏的高度。

一种方法可以是使用负边距 - 左侧技巧：您将侧边栏div放入内容div并将其显示在外部。侧边栏和内容现在都已对齐。但侧边栏在内容中留下了空白区域。

.content{
  background: purple;
  width: 80%;
  margin-left: 20%;
}

.sidebar {
  position: sticky;
  width: 25%; /* Adjust: 25% of 80% of container is 20% of container */
  background: #ff6347;
  bottom: 30px;
  margin-left: -25%;
}

演示：https://jsfiddle.net/zg9g3134/

如果您知道侧边栏的高度。

另一种方法是使用负边距顶部技巧来抑制高度，而不是float: left。

.content{
  background: purple;
  width: 80%;
  margin-left: 20%;
}

.sidebar {
  height: 200px;
  overflow-y: hidden;
  margin-top: -200px;
  position: sticky;
  width: 20%;
  background: #ff6347;
  bottom: 30px;
}

演示：https://jsfiddle.net/rLs8dLba/2/