垂直滚动 100% 高度 div
Vertical scroll on 100% height div
我尝试创建一个 100% 高度的水平滚动条 div。在 jsfiddle 中,右侧的滚动条应该只在 content-table 中可见,但当前滚动条在 y 轴上滚动孔页面,而不仅仅是在 content-table y 轴中。
overflow:auto 只能在 x 轴上工作,为什么不能在 y 轴上工作?
.content-table {
white-space: nowrap;
overflow: auto;
}
那是因为您需要 .content-table 的高度,请尝试包含此 CSS 高度:calc(100% - 100px);
试试这个。
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。在 jsfiddle 中,右侧的滚动条应该只在 content-table 中可见,但当前滚动条在 y 轴上滚动孔页面,而不仅仅是在 content-table y 轴中。
overflow:auto 只能在 x 轴上工作,为什么不能在 y 轴上工作?
.content-table {
white-space: nowrap;
overflow: auto;
}
那是因为您需要 .content-table 的高度,请尝试包含此 CSS 高度:calc(100% - 100px);
试试这个。
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>