固定ヘッダーでスクロール可能なコンテンツ

Question

固定ヘッダーとスクロール可能なコンテンツを持つコンテナーが必要です。

<div class="container"> 
    <div class="header">Header</div> 
    <div class="content"> 
    <ul> 
     <li>Content</li> 
     <li>Content</li> 
     ... 
    </ul> 
    </div> 
<div> 

CSS：

.container { 
    margin-top: 200px; 
} 

.header { 
    position: fixed; 
    width: 100%; 
    height: 20px; 
    background-color: blue; 
    color: white; 
} 

.content { 
    padding-top: 20px; 
    height: 250px; 
    background-color: grey; 
    overflow: auto; 
} 

リンクにcodepen：http://codepen.io/robkom/pen/XKMQGM

あなたが見ることができるように、ヘッダここに私はこの

HTML用に設定されているHTMLやCSSですスクロールバーと重なって表示されます。私が望むのは、スクロールバーがヘッダーを左に（コンテンツと同様に）プッシュし、スクロールするときにコンテナの上部に残ることです。

固定要素は通常のドキュメントフローから削除され、ビューポートに対して配置されるため、position: fixedを使用するソリューションが実行可能かどうかはわかりませんが、この結果を得る方法はありますか？

Answer 1

ここでヘッダにラッパーを使用して、トリックです。

私は、内容に応じてラッパーのサイズを作成してから、ヘッダーを50pxに増やして、すべての異なるブラウザーのスクロールバーのサイズをカバーし、同じ量をラッパーでプッシュするようにしましたそれは再び見える。

このようにすると、個々のスクロールバーの幅の調整（またはスクリプトの使用）について心配する必要はありません。

また、ヘッダーを絶対位置に変更してコンテナとの位置を合わせましたが、必要に応じてもちろん固定に切り替えることもできます。以下のようになりよう

はそう margin/padding-topを追加し、

は、Firefoxが小さい高さのためにスクロールバーを表示しない更新

、これはあなたが探しているものです

html, body { 
 
    margin: 0; 
 
} 
 
.container { 
 
    position: relative; 
 
    overflow-x: hidden; 
 
    margin-top: 0px; 
 
} 
 
.header { 
 
    position: absolute; 
 
    overflow-y: scroll; 
 
    width: calc(100% + 50px); 
 
    height: 20px; 
 
    margin-top: -20px; /* Firefox doesn't show scrollbar for small */ 
 
    padding-top: 20px; /* heights, so these two lines make it work */ 
 
} 
 
.header .wrapper { 
 
    width: calc(100% - 50px); 
 
    height: 100%; 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
.content { 
 
    padding-top: 20px; 
 
    height: 200px; 
 
    background-color: grey; 
 
    overflow: auto; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    <div class="wrapper"> 
 
     Header  
 
    </div> 
 
    </div> 
 
    <div class="content"> 
 
    <ul> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
    </ul> 
 
    </div> 
 
<div>

Answer 2

これはちょっとハック解決策ですが、一つだけ私が考えることができます：ヘッダは.container代わりの文書に固定されます意味new stacking contextを作成するためのハックを変換

.container { 
    margin-top: 200px; 
    transform: translate3d(0,0,0); /*1*/ 
} 

.header { 
    position: fixed; 
    left: 0; right: 17px; /*2*/ 
    height: 20px; 
    background-color: blue; 
    color: white; 
} 

1. 使用。

2. leftとrightを使用して、ヘッダーの幅からスクロールバーの幅を引いた値を設定します（または、width: calc(100% - 17px)）。

   ここでは、スクロールバーの幅がmost modern browsersの17pxなので、ここではマジックナンバーを使用しています。 JS（ブートストラップはmodalでこれを実行しています）を使用して、この値を計算してインラインに設定できます。

EDIT：コメント欄で述べたように、ハックは（position: relativeおよび設定容器）の絶対位置を変更するように必要とされない翻訳も働きます。ここでJSはスクロールバーの幅をretrivingするためのものである：

function getScrollbarWidth() { 
    var scrollDiv = document.createElement('div'); 
    scrollDiv.style.overflowY = 'scroll'; 
    document.body.appendChild(scrollDiv); 
    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; 
    document.body.removeChild(scrollDiv); 
    return scrollbarWidth; 
}; 

function setElementWidth(elem) { 
    var offset = getScrollbarWidth(); 
    elem.style.right = offset + 'px'; 
} 

var header = document.querySelector('.header'); 
setElementWidth(header); 

DEMO