Выравнивание с фиксированными элементами и прокручиваемое содержимое

Question

Here - это упрощенная задача JSFiddle.

Как вы можете видеть, содержимое выбивается из заголовка заголовком из-за полосы прокрутки.

Насколько я знаю, единственный способ справиться с этим, чтобы вычислить ширину полосы прокрутки, используя (отличные method пружины Дэвида Уолша на ум) JavaScript и установить его в качестве 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>