與固定元素和可滾動內容對齊

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>