在 100% 高度 div 上垂直滚动答案

【问题标题】：Vertical scroll on 100% height div在 100% 高度 div 上垂直滚动
【发布时间】：2018-02-03 06:01:24
【问题描述】：

我尝试在 100% 高度的 div 中创建水平滚动条。在 jsfiddle 中，右侧的滚动条应该只在内容表中可见，但当前滚动条在 y 轴上滚动孔页，而不仅仅是在内容表 y 轴上。

overflow:auto 只在 x 轴上有效，为什么不在 y 轴上？

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

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

【问题讨论】：

尝试溢出-y：滚动；溢出后自动

标签： html css overflow vertical-scroll

【解决方案1】：

试试这个。

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>

【讨论】：

【解决方案2】：

那是因为你需要一个 .content-table 的高度尝试包括这个 CSS 高度：calc(100% - 100px);

【讨论】：