垂直滚动100％高度div

问题描述：

我尝试在100％高度div创建水平滚动条。在jsfiddle中，右侧的滚动条应仅在content-table中可见，但当前滚动条在y轴上滚动页面页面，而不仅在content-table y轴上滚动页面。垂直滚动100％高度div

溢出：自动只在x轴上工作，为什么不在y上？

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

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

尝试溢出-Y：滚动;溢出后自动 –

答

That's，因为你需要的。内容表尝试heigth包括这个CSS高度：理论值（100％ - 100像素）;

答

试试这个。

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>

垂直滚动100％高度div

相关推荐