如何在显示浏览器滚动条的网页中保持对齐？答案

【问题标题】：How to preserve alignment in webpage with browser scrollbar shown?如何在显示浏览器滚动条的网页中保持对齐？
【发布时间】：2015-10-01 11:48:08
【问题描述】：

我有一个简单的引导导航和一个主要内容区域。

问题：每当内容超过页面高度，出现右侧的滚动条时，包括菜单在内的整个页面都会相应地向左移动。

这会导致闪烁，因为某些页面仅包含没有 scollbar 的短文本，而有些页面则包含。

问题：即使显示浏览器滚动条，我如何才能使内容保持对齐？

            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container">

                    <div class="collapse navbar-collapse" id="example-navbar-collapse">
                      <ul class="nav navbar-nav">
                        <li><a href="#">tab1</a></li>
                        <li><a href="#">tab2</a></li>
                        <li><a href="#">tab3</a></li>
                      </ul>
                    </div>
                </div>
            </nav>

            <div class="content">

            </div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

确保你只是给：

body {
    overflow-y: scroll;
}

大多数时候，你不需要overflow-x，它是水平滚动条。为了向后兼容，请使用以下内容：

body {
    overflow: scroll;
    overflow-x: hidden;
}

【讨论】：

这真的应该是对我原来答案的评论。你还没有解释这实际上做了什么以及为什么。
@shennan 嗯，这是我在回答中给出的解释，对吧？

【解决方案2】：

阻止页面内容“跳转”的常用方法是强制垂直滚动条，即使没有可滚动的内容。

body {
    overflow: scroll;
}

这是我的首选方法，因为不同的浏览器具有不同的滚动条宽度，并且没有确定是否添加了滚动条的可靠方法。

【讨论】：