浏览器垂直滚动条不能在浏览器窗口的最右侧

我的垂直滚动条正确，滚动显示正常，如果：浏览器垂直滚动条不能在浏览器窗口的最右侧

我让浏览器窗口高度足以显示我的网站的整个着陆页
然后塌陷浏览器窗口的高度，所以只有在页面的顶部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是可见的
然后点击浏览器中的'重新加载'按钮
在这种情况下，页面相关但垂直滚动条不是'注意到'网页的下半部分 - 垂直滚动条没有显示足够的'可滚动容量'，即。 '滚动偏移'，以允许向下滚动足够远。

页面上的最外层的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，但是当它出现时，它没有'范围'，无法向下滚动页面。

我在这里的风格有冲突吗？

来源

2014-03-04 CFHcoder

这是一个准确的小提琴吗？：http://fiddle.jshell.net/DuLQE/1/show/ – Jack

@JackPattishallJr。是和否 - 在您的.tall中，我没有使用浮动内容，而且内部div上没有固定高度，页面内div的文本内容可能会发生变化。 – CFHcoder

这是一个艰难的重现。这里有一个更多的尝试：http://fiddle.jshell.net/DuLQE/6/show/ - 像这样的东西？（'white-space：nowrap'导致lorem ipsum不能包裹，但希望DIV的高度相似......） – Jack

我通过恢复到较旧版本的源代码而退出了很多代码更改，问题消失了。有时候，重要的是要留意整体情况并减少损失，代码的很多变化都会导致滚动的症状，并节省时间以在问题出现之前返回到代码版本。

来源

2014-03-09 15:44:01 CFHcoder

浏览器垂直滚动条不能在浏览器窗口的最右侧

回答

相关问题