高さ100％のdivの垂直スクロール

Question

100％高さのdivに水平スクロールバーを作成しようとしています。 jsfiddleでは、右側のスクロールバーはコンテンツテーブルでのみ表示されるはずですが、コンテンツテーブルのy軸だけでなく、y軸上のスクロールバーのスクロールバーページを最新の状態にする必要があります。

オーバーフロー：autoはx軸でのみ動作しますが、yでは使用しないでください。

.content-table { 
    white-space: nowrap; 
    overflow: auto; 
} 

https://jsfiddle.net/mnlfischer/4g979nym/1/

Answer 1

That'sあなたはこのCSSの高さを含む.content-テーブルトライためheigth必要があるため、：CALC（100％ - 100pxにします）。

Answer 2

これを試してください。

html, body{ 
 
    margin:0; 
 
    overflow: hidden; 
 
} 
 
.container { 
 
    width: 100%; 
 
    height: 100vh; 
 
    margin: 0; 
 
    overflow: auto; 
 
} 
 

 
.column-lead { 
 
    white-space: nowrap; 
 
    overflow-x: auto; 
 
} 
 

 
.column-lead-item { 
 
    width: 200px; 
 
    background-color: lightgreen; 
 
    display: inline-block; 
 
    padding: 30px 10px; 
 
} 
 

 
.row-lead { 
 
    float: left; 
 
    overflow-y: auto; 
 
    height: 100vh; 
 
} 
 

 
.row-lead-item { 
 
    padding: 30px 10px; 
 
    width: 200px; 
 
    background-color: yellow; 
 
} 
 

 
.content-table { 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
    height: 100vh; 
 
} 
 

 
.content-table-row { 
 
    width: 100%; 
 
} 
 

 
.content-table-item { 
 
    display: inline-block; 
 
    width: 200px; 
 
    padding: 30px 10px; 
 
    background-color: green; 
 
}

<div class="container"> 
 

 
    <div class="row-lead"> 
 
    <div class="row-lead-item">Row Lead Item</div> 
 
    <div class="row-lead-item">Row Lead Item</div> 
 
    <div class="row-lead-item">Row Lead Item</div> 
 
    <div class="row-lead-item">Row Lead Item</div> 
 
    <div class="row-lead-item">Row Lead Item</div> 
 
    <div class="row-lead-item">Row Lead Item</div> 
 
    <div class="row-lead-item">Row Lead Item</div> 
 
    <div class="row-lead-item">Row Lead Item</div> 
 
    </div> 
 
    
 
    
 
    
 
    <div class="content-table"> 
 
    <div class="column-lead"> 
 
    <div class="column-lead-item">Column Lead Item</div> 
 
    <div class="column-lead-item">Column Lead Item</div> 
 
    <div class="column-lead-item">Column Lead Item</div> 
 
    <div class="column-lead-item">Column Lead Item</div> 
 
    <div class="column-lead-item">Column Lead Item</div> 
 
    <div class="column-lead-item">Column Lead Item</div> 
 
    <div class="column-lead-item">Column Lead Item</div> 
 
    </div><div class="content-table-row"> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
    </div> 
 
    <div class="content-table-row"> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
    </div> 
 
    <div class="content-table-row"> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
    </div> 
 
    <div class="content-table-row"> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
    </div> 
 
    <div class="content-table-row"> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
    </div> 
 
    <div class="content-table-row"> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
     <div class="content-table-item">Content Cell</div> 
 
    </div> 
 
    </div> 
 
    
 
</div>