与固定元素和可滚动内容对齐

正如您所看到的，由于滚动条的原因，内容会因标题而失败。

据我所知，解决这个问题的唯一方法是使用Javascript计算滚动条的宽度（David Walsh的优秀method弹出），并将其设置为标头的left/right: -scrollbarwidthpx值。

但是，考虑到我正在处理的页面的动态性质，头部放置在DOM中，并且根据用户滚动到的位置改变位置，这是我希望转向的一个选项只有当我没有别的事情可以做时。

我的问题是，有没有什么办法可以在保留滚动溢出的情况下将滚动条或内容从流中移出，否则只使用HTML/CSS对齐两个元素？所有浏览器/操作系统的滚动条宽度是否一致，都会影响流程？或者我将不得不诉诸使用Javascript来对齐它们？

谢谢！

2014-09-25 styke

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    margin: 0; 
 
} 
 

 
.scroll { 
 
    overflow: auto; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#content{ 
 
    width: 400px; 
 
    height:auto; 
 
    margin: auto; 
 
    background:gray; 
 
} 
 
.header { 
 
    width: 400px; 
 
    position: fixed; 
 
    margin: 0 auto; 
 
    height: 60px; 
 
    background: yellow; 
 
    z-index: 10; 
 
} 
 

 
.content { 
 
    height: 1200px; 
 
    background: linear-gradient(red, orange); 
 
    width: 100%; 
 
    margin: auto; 
 
    position: relative; 
 
    z-index: 1; 
 
    border-top:61px solid; 
 
    border-bottom:1px solid; 
 
}

<div class="scroll"> 
 
    <div id="content"> 
 
     <div class="header"></div> 
 
     <div class="content"></div> 
 
    </div> 
 
</div>

来源

2014-09-25 17:20:47 AvrilAlejandro

与固定元素和可滚动内容对齐

回答

相关问题