Question

Here是问题的简化JSFiddle。

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

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

但是，考虑到我正在处理的页面的动态特性，标题放在DOM中，位置根据用户滚动到的位置而变化，这是一个我希望只转向的选项如果没有别的我可以做的。

我的问题是，有没有什么方法可以在保留滚动溢出的同时将滚动条或内容从流中取出，或者仅使用HTML / CSS对齐这两个元素？所有浏览器/操作系统的滚动条宽度是否一致，它们会影响流量？或者我是否必须使用Javascript来对齐它们？

谢谢！

Answer 1

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>

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

1 个答案: