由于滚动条，处理错位对齐标题和主要的最佳方法

Question

我正在使用顶部标题和主要内容区域的网站上工作。标题不滚动但主区域滚动。这意味着我在主区域的右侧有一个滚动条但在标题的右侧没有滚动条，它们没有对齐：

在此图片中，红色条是内容，橙色条是标题的中心部分，应该与内容一致。

这些都使用此css对齐：

.center-content {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

最佳方法是什么？

我在考虑永久添加滚动条，但我并不是真的想要这样做。然后，我可以在主要部分的左侧添加一些填充以重新居中。或者，我可以在标题的右侧添加填充。

问题：

• 如何根据主要部分有滚动条的方式更改标题的样式？
• 如何根据滚动条的滚动条向主要部分添加填充？
• 如何获得滚动条的宽度？这保证在所有浏览器中都是相同的（我也需要为移动设备提供服务）

我为此创建了一个JSbin来说明问题。 我正在使用material-design-lite样式表。

Answer 1

您不希望根据滚动条更改任何样式 - 我认为这太复杂了，几乎肯定会涉及到javascript。滚动条在浏览器/移动设备上也不一致。更好的选择是将标题修复到页面顶部，并使内容div margin-top等于标题的高度。然后滚动条出现在整个页面的右侧。请看这里的例子：

http://output.jsbin.com/xuroyaceli/#

调整窗口大小以查看滚动条的外观。