【发布时间】：2014-03-09 23:44:01
【问题描述】：
浏览器窗口最右侧的垂直滚动条在以下情况下正确显示并正确滚动：
- 我将浏览器窗口设置得足够高，以显示我网站的整个着陆页
- 然后折叠浏览器窗口的高度，这样只有页面顶部的 1/2 可见
- 在这种情况下，垂直滚动条会自动出现，并且它正确地允许向下滚动以查看页面的其余部分
这是使垂直滚动条可见的 CSS 样式：
<!DOCTYPE html>
<html style="min-width: 100%">
body
{
white-space: nowrap;
height: 105%;
overflow-y: scroll; /* scrollbar always visible, stops page content shifting left */
} /* due to the sudden appearance of the scrollbar on the right */
但是，如果我执行以下操作，浏览器右侧边缘的垂直滚动条将无法工作，如果：
- 在加载登录页面之前，我降低了浏览器窗口的高度，因此加载时只有网页的顶部 1/2 可见
- 然后点击浏览器中的“重新加载”按钮
- 在这种情况下，页面会重新加载，但垂直滚动条不知何故没有“注意到”网页的下 1/2 - 垂直滚动条没有显示足够的“可滚动容量”，即。 “滚动偏移”，允许向下滚动足够远。
页面最外层的 div 有以下样式：
.DivForCenteringThePage
{
min-width: 100%;
min-height: 100%;
white-space: nowrap;
margin: 0 auto;
}
<div id="wholePageDiv" class="DivForCenteringThePage">
<div id="outerDiv" style="margin: 0; margin-top: 10px; min-width: 100%;
display: inline-block; overflow: hidden;">
<div id="leftSide" style="vertical-align: top; display: inline-block;
min-height: 99%; overflow-y: auto; overflow-x: hidden;">
/* A BUNCH OF TALL COLUMNS CONTAINING STACKED DIVS IS THE PAGE */
</div> <!-- leftSide div -->
</div> <!-- outerDiv -->
</div> <!-- wholePageDiv -->
我被难住了。一方面，如果我从浏览器窗口高度开始以显示整个页面的高度，然后折叠浏览器以仅显示页面的顶部 1/2，则浏览器的垂直滚动条可以正常工作 - 垂直滚动条出现正确，我可以向下滚动以查看页面的底部 1/2。
但是如果我开始在浏览器窗口仅高到显示页面顶部的 1/2 时加载页面 - 垂直 scollbar 需要在那里允许向下滚动到看到页面的底部 1/2，但是当它出现时，它没有“范围”，无法向下滚动页面。
我的风格有冲突吗？
【问题讨论】：
-
这是一个准确的小提琴吗？：fiddle.jshell.net/DuLQE/1/show
-
@JackPattishallJr.是也不是——在你的 .tall 中，我没有使用浮点数，并且内部 div 没有固定高度，页面内 div 中的文本内容可以更改。
-
这是一个很难复制的。这是另一次尝试：fiddle.jshell.net/DuLQE/6/show - 像这样的东西？ （
white-space: nowrap导致 lorem ipsum 不换行，但希望 DIV 的高度相似......） -
@JackPattishallJr.我删除了#leftSide div { line-height: 90px; } 从你的例子 - 和浏览器窗口右边缘的垂直滚动条仍然不能重现我所看到的。我必须在代码中某处埋藏一些东西，重置这些div之一的高度以匹配浏览器窗口的高度仅在加载时而不是在滚动时，但如果我能找到它该死.
-
我刚刚从页面中删除了所有内容，所有文本 div，并将其替换为您示例中的所有文本，并且仍然能够看到我的症状——这很有帮助，因为它消除了（正如我所料）页面中包含 div 和文本的任何代码。我正在缩小范围，你的样本让我朝着正确的方向前进。