Css 定位元素时考虑滚动条宽度

我有一个最大宽度的布局，当屏幕宽度大于该最大值时，该布局水平居中。布局包括一个固定的标题和菜单；当屏幕宽度小于最大值时，菜单的

左

位置为

0

，当屏幕宽度超过最大值时，菜单的

左

位置需要与布局其余部分的左边缘齐平

下面是它的外观：

*{框大小：边框框；边距：0；填充：0；}
标题{
对齐项目：居中；
背景：#eee；
边框底部：1px实心#999；
显示器：flex；
高度：100px；
左：0；
证明内容：中心；
填充：0 10px；
位置：固定；
右：0；
排名：0；
}
h1{
高度：60px；
位置：相对位置；
宽度：计算（100%-40px）；
最大宽度：740px；
z指数：2；
}
img{
身高：100%；
宽度：自动；
}
导航{
背景：#eee；
右边框：1px实心#999；
底部：0；
左：0；
位置：固定；
排名：0；
宽度：300px；
z指数：1；
}
@介质（最小宽度：801px）{
导航{
左边框：1px实心#999；
左：计算（（100%-800px）/2）
}
}
导航：：在{背景：#ecc；底部：0；内容：；左侧：0；位置：绝对；顶部：0；宽度：10px；}
导航：：在{背景：#999；内容：''之后；高度：1px；左侧：0；位置：绝对；右侧：0；顶部：99px；}
主{背景：ddf；左边框：1px实心#99c；右边框：1px实心#99c；高度：100vh；最小高度：100%；边距：0自动；宽度：100%；最大宽度：800px；}

编辑

/*Alexander Gomez的getScrollBarWidth缩短版Josh Bambrick来自：
http://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes 
*/
函数getScrollBarWidth（）{
变量$outer=$（''）.css({
可见性：“隐藏”，
宽度：100，
溢出：“滚动”
}).appendTo（‘body’），
widthWithScroll=$（''）.css({
宽度：“100%”
}).appendTo（$outer）.outerWidth（）；
$outer.remove（）；
返回100-带croll的宽度；
};
/*在Chrome 51.0.2704、Firefox 40.0.2、Internet Explorer 11上测试*/
$（文档）.ready（函数（）{
var mydelta=800；/*您的“主”divs宽度*/
var delta_mq=mydelta+1；
delta=mydelta-getScrollBarWidth（）；
var h1_logo=δ-40；
var$added='h1{max width:'+h1_logo+'px}main{max width:'+mydelta+'px}@media（最小宽度：'+delta_mq+'px）{main{main{left:calc（（100%-'+delta+'px）/2）}导航{边框左侧：1px实心#999；左侧：calc（（100%-'+delta+'px）/2）}；
$（'body'）。追加（$added）；
});
*{
框大小：边框框；
保证金：0；
填充：0
}
/*
“*”选择器因速度较慢而被折旧
改用normalize.css
我删除了你的css媒体并将它们附加到
获取滚动条宽度后使用jquery的页面
*/
标题{
对齐项目：居中；
背景：#eee；
边框底部：1px实心#999；
显示器：flex；
高度：100px；
左：0；
证明内容：中心；
填充：0 10px；
位置：固定；
右：0；
排名：0；
}
h1{
高度：60px；
位置：相对位置；
宽度：计算（100%-40px）；
最大宽度：750px；
z指数：2；
}
img{
身高：100%；
宽度：自动；
}
导航{
背景：#eee；
右边框：1px实心#999；
底部：0；
左：0；
位置：固定；
排名：0；
宽度：300px；
z指数：1；
}
主{/*位置，带100px上边距*/
位置：绝对位置；
顶部：100px；
}
标题{/*chrome-fix*/
z指数：1；
}
导航：：在{背景：#ecc；底部：0；内容：；左侧：0；位置：绝对；顶部：0；宽度：10px；}
导航：：在{背景：#999；内容：''之后；高度：1px；左侧：0；位置：绝对；右侧：0；顶部：99px；}
主{背景：ddf；左边框：1px实心#99c；右边框：1px实心#99c；高度：100vh；最小高度：100%；边距：0自动；宽度：100%；最大宽度：800px；}

对于任何遇到这个问题并愿意接受JavaScript解决方案的人来说，这里有一个非常简单的方法，当视口的宽度大于
800px
但
主体
元素的宽度小于此值时，它会强制
nav
元素的
left
位置为
0

这个解决方案的缺点是使用JavaScript来实现（至少在我看来）我们应该能够单独使用CSS和使用
onresize
侦听器的开销。但是，如果您只关心菜单是否正确定位为
onload
（请参阅代码段中的注释JavaScript），则可以删除该侦听器


（（b，n，设置菜单）=>{
（setmenu=（）=>n.dataset.forceleft=b.offsetWidth.querySelector（“nav”）.dataset.forceleft=d.body.offsetWidth如果您接受JS解决方案。。。
您可能希望使用下面的函数获取
实际宽度
，而不是
滚动条宽度

function getRealWidth()
{
    var windowWidth = 0;
    if (typeof(window.innerWidth) == 'number')
   {
        windowWidth = window.innerWidth;
    }
   else
   {
        if (document.documentElement && document.documentElement.clientWidth)
      {
            windowWidth = document.documentElement.clientWidth;
        }
      else
      {
            if (document.body && document.body.clientWidth)
         {
                windowWidth = document.body.clientWidth;
            }
        }
    }

    return windowWidth;
}

请校对你的标题。是的，很难给它一个简洁准确的描述标题。新标题更好吗？如果你能改进，请建议编辑：）有趣的问题，据我所知，仅使用CSS仍然不可能。原因是，有些浏览器包含宽度，有些不包含。然后在移动设备上，没有“phsyic”滚动条。所以它不能只调用CSS上的滚动条宽度。浏览器的一个快速修复方法是将
min width
设置为
816px
。但是如果你没有滚动条，这又会把一切搞砸。有一些js插件可以帮助你处理诸如Viewport-Genie或mqGenie：在主体上使用overflow-y:scroll怎么样所以滚动条总是在那里？这样你就不用担心它在不同宽度之间切换了。看看我的答案：）我现在正在打电话，所以无法正确测试或阅读此内容，但看起来这只会在存在滚动条且滚动条宽度为22px的情况下解决问题。请签出我的编辑，我将您的<