Question

我正在尝试使用动态加载的项目实现固定侧边栏，点击Load More按钮。

我将一个类fixed附加到父侧边栏div并将innerscroll附加到内部div以使其可滚动。

.fixed{position:fixed;top:0; bottom:0}
.innerscroll{overflow-y:scroll;height:100%}

补充工具栏代码

<div id="sidebar" class="sticky">
 <div class="cat-select"><select>
...
</select></div>
  <div class="item">
<section id="ajax-load-more">
... ajax content...
</section>      
  </div>
</div>

无法弄清楚为什么在加载下一组帖子后我无法滚动到最后，以便加载更多按钮可见。

Answer 1

好的，我明白了。只需在.fixed类中添加两行：

.fixed {
   position: fixed;
   top: 0;
   bottom: 45px; /* added */
   min-height: 0 !important; /* added */
}

这将完全按照您的预期工作。祝你好运！

Answer 2

我相信这是因为你将内部滚动div设置为高度：100％。我将其更改为高度：90％ - 按钮现在可见，您的内容仍可滚动。我不知道为什么将它设置为高度100％会淘汰你的按钮。

Answer 3

你需要调整一些东西才能让它发挥作用。

首先是你的div侧栏到班级棒

<div id="sidebar" class="sticky fixed">

一旦你完成了这个，那么只需修改#sidebar第22行style.css的CSS你说1000px，但真的

#sidebar {
min-height: 50%;
max-height: 95%;
}

这使它适合我。另外我可能是错的，你可能不需要做DIV所以先试试CSS然后尝试DIV和CSS，如果只是CSS没有修复它。希望这会对你有所帮助。

Answer 4

CSS（过度）补偿你的（隐藏的）45px高标题栏！

你需要做的就是勇敢地和在CSS中神秘地使用bottom: 45px和不 bottom: 0px：

.fixed{
    position: fixed;
    top: 0px;
    bottom: 45px;
}

如果我打开Element Inspector并仅更改上面的内容，我的演示界面就能完美运行。

使用基于百分比的高度并不是您（或任何人）的确切修复。这样会有差距。

Answer 5

首先关闭min-height: 1000px #sidebar。然后在.innerscroll下面选择你的毒药。

隐藏按钮位于底部，因为.cat-select的高度为22px。设置height: 100%将.innerscroll设置为父级的高度，无论父div中的其他子级是什么。因此，如果父级是500px，.innerscroll也将是500px，只是降低了22px。将其降低使得22px隐藏在div的底部。您可以在position: absolute; top: 0上设置.innerscroll来查看此内容。

三个选项（第三个是我个人的选择）： DEMO

如果calc适用于您的实施（caniuse.com），则可以使用height: calc(100% - 22px)。
或者您可以缩小.innerscroll，如其他答案（height: 98%或其他适用于您的案例）中指定的那样。
或者您可以将position: absolute; top: 0;设置为.innerscroll，然后在margin-top: 22px上设置.listing。这将设置具有overflow-y的滚动div以匹配父级的顶部和底部，并使22px向下推入该div内部。

定位固定侧边栏，溢出滚动不滚动到底部

5 个答案:

CSS（过度）补偿你的（隐藏的）45px高标题栏！