以 100% 高度显示滚动条的结尾答案

【问题标题】：Show The End of Scrollbar with 100% Height以 100% 高度显示滚动条的结尾
【发布时间】：2015-08-15 22:36:11
【问题描述】：

我有一个位置：绝对 div，顶部：114px 和溢出：自动。我向 div 添加了 height: 100% ，滚动显示但 div 的底部被覆盖，包括滚动的末尾。如何使滚动显示的底部？

我试图将 div 更改为 position: relative;溢出：自动；顶部：0px；高度：100%；但没有显示滚动条。

有人帮忙吗？

谢谢。

【问题讨论】：

无法复制。请发布相关的 HTML，最好是小提琴。
你可以尝试将overflow:auto移动到这个div之外的元素吗？
@Justinas top: 0 仍然隐藏滚动条的末尾。我需要顶部为 114px
设置top: 114px; height: calc(100% - 114px);，并从父元素中移除paddings + margins。

标签： css

【解决方案1】：

我不完全确定您想要实现什么行为，但我想您需要的只是添加“底部：0px;”到您绝对定位的 div。

整体解决方案：

body {
    overflow: hidden; /* Page doesn't scroll... */
    padding: 0;
    margin: 0;
}

.content {
    position: absolute;
    overflow-y: scroll; /* ...but the content does. */
    overflow-x: auto;
    top: 114px;
    bottom: 0px;
    width: 100%;
    background-color: #ffdf00;    
}

<body>
    <div class="content"></div>
</body>

https://jsfiddle.net/tzyzmxjv/1/

【讨论】：