垂直滾動100％高度div

Question

我嘗試在100％高度的div中創建一個水平滾動條。 在jsfiddle中，右側的滾動條應僅在內容表中可見，而當前滾動條僅在y軸上而不是在內容表y軸上滾動孔頁面。

overflow：auto僅在x軸上有效，為什么不在y上有效？

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

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

Answer 1

那是因為您需要.content-table的高度，嘗試包括以下CSS高度：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>