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

Question

我有一个最大宽度的布局,当屏幕宽度大于最大值时,它会水平居中.布局包括固定的标题和菜单; 当屏幕宽度小于最大值时,菜单的left位置为0,当屏幕宽度超过最大值时,菜单的left位置需要与布局其余部分的左边缘齐平.

这是它应该看起来的样子:

*{box-sizing:border-box;margin:0;padding:0;}
header{
    align-items:center;
    background:#eee;
    border-bottom:1px solid #999;
    display:flex;
    height:100px;
    left:0;
    justify-content:center;
    padding:0 10px;
    position:fixed;
    right:0;
    top:0;
}
h1{
    height:60px;
    position:relative;
    width:calc(100% - 40px);
    max-width:740px;
    z-index:2;
}
img{
    height:100%;
    width:auto;
}
nav{
    background:#eee;
    border-right:1px solid #999;
    bottom:0;
    left:0;
    position:fixed;
    top:0;
    width:300px;
    z-index:1;
}
@media (min-width:801px){
    nav{
        border-left:1px solid #999;
        left:calc((100% - 800px) / 2)
    }
}
nav::before{background:#ecc;bottom:0;content:"";left:0;position:absolute;top:0;width:10px;}
nav::after{background:#999;content:"";height:1px;left:0;position:absolute;right:0;top:99px;}
main{background:#ddf;border-left:1px solid #99c;border-right:1px solid #99c;height:100vh;min-height:100%;margin:0 auto;width:100%;max-width:800px;}

<header>
    <h1><img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></h1>
    <nav></nav>
</header>
<main></main>

但是,当引入垂直滚动条时,由于滚动条宽度包含在媒体查询中检查的宽度中,导致问题出现,left当屏幕宽度介于800px和800之间时导致菜单的负位置- xpx(x滚动条的宽度在哪里).您可以在下面的代码段中看到这一点(您可能需要全屏查看),方法是将浏览器的大小调整为略小于800px - 菜单的右边框会更接近徽标和红色边缘.菜单被裁剪.

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:101%;}
header{
    align-items:center;
    background:#eee;
    border-bottom:1px solid #999;
    display:flex;
    height:100px;
    left:0;
    justify-content:center;
    padding:0 10px;
    position:fixed;
    right:0;
    top:0;
}
h1{
    height:60px;
    position:relative;
    width:calc(100% - 40px);
    max-width:740px;
    z-index:2;
}
img{
    height:100%;
    width:auto;
}
nav{
    background:#eee;
    border-right:1px solid #999;
    bottom:0;
    left:0;
    position:fixed;
    top:0;
    width:300px;
    z-index:1;
}
@media (min-width:801px){
    nav{
        border-left:1px solid #999;
        left:calc((100% - 800px) / 2)
    }
}
nav::before{background:#ecc;bottom:0;content:"";left:0;position:absolute;top:0;width:10px;}
nav::after{background:#999;content:"";height:1px;left:0;position:absolute;right:0;top:99px;}
main{background:#ddf;border-left:1px solid #99c;border-right:1px solid #99c;height:100vh;min-height:100%;margin:0 auto;width:100%;max-width:800px;}

<header>
    <h1><img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></h1>
    <nav></nav>
</header>
<main></main>

我理解发生了什么以及它为什么会发生但我的问题是:有没有办法,仅使用CSS来防止它发生？我已经尝试使用视口单元而不是百分比,但这反过来会产生问题; 在某些屏幕宽度下,徽标会向左移动一点,远离菜单的右边框.如果所有浏览器都具有相同的滚动条宽度或允许自定义滚动条样式,那么很容易解决这个问题,但不幸的是,情况并非如此.

08/09/16:我现在已经接受了我自己的答案,因为它是我能提出的最好的JavaScript解决方案,但我仍在寻找CSS解决方案.

Answer 1

为了让任何遇到这个问题并对 JavaScript 解决方案持开放态度的人受益，这里有一个非常简单的解决方案，当视口nav的宽度大于但元素的宽度小于该宽度时，它会强制元素的位置。left0800pxbody

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

((b,n,setmenu)=>{
    (setmenu=()=>n.dataset.forceleft=b.offsetWidth<800)();
    window.addEventListener("resize",setmenu,0);
})(document.body,document.querySelector("nav"));

// Use above to set menu position onload and onresize
// Or use below to only set menu position onload
//(d=>d.querySelector("nav").dataset.forceLeft=d.body.offsetWidth<800)(document);

nav{
    background:#eee;
    border-right:1px solid #999;
    bottom:0;
    left:0;
    position:fixed;
    top:0;
    width:300px;
    z-index:1;
}
@media (min-width:801px){
    nav[data-forceleft=false]{
        border-left:1px solid #999;
        left:calc((100% - 800px) / 2)
    }
}
header{
    align-items:center;
    background:#eee;
    border-bottom:1px solid #999;
    display:flex;
    height:100px;
    left:0;
    justify-content:center;
    padding:0 10px;
    position:fixed;
    right:0;
    top:0;
}
h1{
    height:60px;
    position:relative;
    width:calc(100% - 40px);
    max-width:740px;
    z-index:2;
}
img{
    height:100%;
    width:auto;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:101%;}
nav::before{background:#ecc;bottom:0;content:"";left:0;position:absolute;top:0;width:10px;}
nav::after{background:#999;content:"";height:1px;left:0;position:absolute;right:0;top:99px;}
main{background:#ddf;border-left:1px solid #99c;border-right:1px solid #99c;height:100vh;min-height:100%;margin:0 auto;width:100%;max-width:800px;}

<header>
    <h1><img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></h1>
    <nav></nav>
</header>
<main></main>