在添加内容时将 div 中的内容居中设置为溢出答案

【问题标题】：Center content in a div set to overflow, as content is added在添加内容时将 div 中的内容居中设置为溢出
【发布时间】：2013-11-12 23:51:15
【问题描述】：

我正在构建一个棒球模拟器，并且我有一个记录各种游戏更新的“游戏报告”div（在此图像的底部框中表示）：

到目前为止，我有一些 JS 允许 div 在添加新内容时滚动，但新内容位于底部。

我想将它垂直居中，作为它的生成，它下方的空白区域为新内容做好准备。生成内容时，它会为内容设置动画，使空白区域或多或少保持不变。

我目前正在使用它来自动滚动它（coffeescript）：

@reporter = $("#gameplay-game-report")
@height = $("#gameplay-game-report").height()
@reporter.animate({scrollTop: @height}, "slow")
@height += @reporter.height()
console.log("IN GAMEPLAY::addGameReport -> @height = #{@height}")

我尝试在 @height 中添加和减去值，但这并没有导致我观察到任何变化。

【问题讨论】：

所以你希望最后一个元素位于这个 div 的中间，下面的空格是下一个元素？
@JustinM 是的，没错。
好的，那么我想发生的事情是它不会进一步滚动内容，因为它位于内容的底部。您需要做的是扩展内容的实际高度。通过在底部添加填充。或者通过显式设置高度。给我一些时间，我可以设置一个 JsFiddle 示例来设置填充。

标签： javascript jquery html css coffeescript

【解决方案1】：

正如这里所承诺的，JsFiddle 展示了如何实现这一点。这里的关键是使用

var height = $('#scrollable')[0].scrollHeight;

获取您正在滚动的 div 的高度。其次是

    padding-bottom: 200px;

强制额外的空白。

关于我发现的填充的附注如果我将 div 的高度设置为 400，将填充设置为 200，它实际上会强制 div 为 600。所以将 div 的高度设置为所需空间的一半并设置填充- 底部相同。

【讨论】：