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

时间：2016-08-26 09:27:18

标签： css

我有一个最大宽度的布局，当屏幕宽度大于最大值时，它会水平居中。布局包括一个固定的标题＆amp;菜单;当屏幕宽度小于最大值时，菜单的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之间 - x px（其中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解决方案。

3 个答案:

答案 0 :(得分：1)

修改 it's okay here 

/* Alexander Gomez's getScrollBarWidth shorten version Josh Bambrick from: 
http://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes 
*/
function getScrollBarWidth() {
  var $outer = $('<div>').css({
      visibility: 'hidden',
      width: 100,
      overflow: 'scroll'
    }).appendTo('body'),
    widthWithScroll = $('<div>').css({
      width: '100%'
    }).appendTo($outer).outerWidth();
  $outer.remove();
  return 100 - widthWithScroll;
};
/* Tested on Chrome 51.0.2704, Firefox 40.0.2, Internet Explorer 11 */
$(document).ready(function() {
  var mydelta = 800; /* your 'main' divs width */
  var delta_mq = mydelta + 1;
  delta = mydelta - getScrollBarWidth();
  var h1_logo = delta - 40;
  var $appended = '<style>h1{max-width:' + h1_logo + 'px} main{max-width:' + mydelta + 'px} @media (min-width:' + delta_mq + 'px){main{left:calc((100% - ' + delta + 'px) / 2);} nav{border-left:1px solid #999;left:calc((100% - ' + delta + 'px) / 2); } }';
  $('body').append($appended);
});
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
/*
     '*' selector is depreciated cause it's slow 
     use normalize.css instead 
     
     And i removed your css media and appended them to the 
     page using jquery after getting scrollbar width
     */

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: 750px;
  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;
}

main { /* position with 100px top margin */
  position: absolute;
  top: 100px;
}
header { /* chrome fix */
  z-index: 1;
}

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

答案 1 :(得分：0)

对于遇到此问题且对JavaScript解决方案开放的任何人而言，这是一个非常简单的强制nav元素的left位置{ {1}}当视口的宽度大于0时，800px元素的宽度小于该值。

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

＆＃13;
＆＃13; 
onload
＆＃13; 
((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);
＆＃13; 
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;}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

如果您接受JS解决方案...... 您可能希望使用以下函数获取Real Width而不是Scroll Bar Width。

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;
}
相关问题
最新问题