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

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

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

这会导致闪烁，因为有些页面只包含没有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>

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

body {
    overflow: scroll;
}

---

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

确保您只给出：

正文{
溢出y：滚动；
}

大多数情况下，您不需要使用水平滚动条

overflow-x

。为了向后兼容，请使用以下命令：

正文{
溢出：滚动；
溢出x：隐藏；
}

这真的应该是对我最初答案的评论。你还没有解释这一切到底是怎么回事，为什么会这样。@shennan好吧，这就是我在回答中给出的解释，对吗？