如何使用 CSS 属性来允许div与嵌套divs，定义了绝对位置，以便能够滚动一次这些定义的位置divs 超出其父级div?
我已经精简了我的项目，（希望）只包含您在下面需要的内容，并且我认识到，使用我在这里演示的示例有更干净的方法可以做到这一点，但认为值得询问，因为有人可能有洞察力我（和其他人）可以从中学习。
在我的例子中，有div“盒子”（他们有class=stuffbox）被放置在一个div (has class=innerstuffcols）并且它们溢出了其父级的垂直边界div.
#mainHeader {
background-color: #999999;
color: #ffffff;
position: absolute;
width: 100%;
height: 5%;
left: 0;
top: 0;
}
#mainPlace {
position:absolute;
width:100%;
height:95%;
left:0;
top:5%;
overflow:hidden;
}
#mainTable {
position:absolute;
left:0;
height:100%;
width: 85%;
overflow:hidden;
}
#mainMenu {
position:absolute;
left:85%;
right:0;
height:100%;
}
#tablebody {
height: 100%;
width: 100%;
}
th.tableheaders {
border:1px solid black;
height: 5%
}
td.someCols {
border:1px solid black;
}
table, th, td {
border-collapse: collapse;
}
div.innerstuffCols {
height: 100%;
width:100%;
overflow-y: auto;
overflow-x: hidden;
}
div.stuffbox {
height:200px;
position:absolute;
width:200px;
left:5px;
text-align: center;
background-color: #f1f1f1;
}
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>stuff</title>
<link rel="stylesheet" href="st.css">
</head>
<body>
<div id="mainHeader">
<p align="center"> random header here </p>
</div>
<div id="mainPlace">
<div id="mainTable">
<table style='width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;border:1px solid black'>
<tr id='tableheader'>
<th class='tableheaders'>header 1</th>
<th class='tableheaders'>header 2</th>
</tr>
<tr id='tablebody'>
<td class='someCols'>
<div class='innerstuffCols'>
<div class='stuffbox' style='top:55px;'> stuff 1 </div>
<div class='stuffbox' style='top:265px;'> stuff 2 </div>
<div class='stuffbox' style='top:475px;'> stuff 3 </div>
<div class='stuffbox' style='top:685px;'> stuff 4 </div>
<div class='stuffbox' style='top:895px;'> stuff 5 </div>
<div class='stuffbox' style='top:1105px;'> stuff 6 </div>
</div>
</td>
<td class='someCols'>
<div class='innerstuffCols'>
some other stuff
</div>
</td>
</tr>
</table>
</div>
<div id="mainMenu">
<p> some stuff here </p>
</div>
</div>
</body>
</html>
如前所述，我知道在我的示例中所呈现的范围内，有更好的方法可以做到这一点（使位置不是绝对的，等等），但由于与更大的项目相关的各种原因（并且在这一点 - 学术好奇心）我更愿意看到如何让上面的例子工作同时保持这些的解释divs 及其绝对位置。
如果问题的措辞不好，我深表歉意（请告诉我，我会再试一次），但希望这个例子能够清楚地表达我的意图。
提前致谢。
Use position:relative使绝对定位的元素相对于该容器定位，并且overflow:scroll使其可滚动。 （您也可以省略 div 并直接在表格 cel 上执行此操作。）
#mainHeader {
background-color: #999999;
color: #ffffff;
position: absolute;
width: 100%;
height: 5%;
left: 0;
top: 0;
}
#mainPlace {
position: absolute;
width: 100%;
height: 95%;
left: 0;
top: 5%;
overflow: hidden;
}
#mainTable {
position: absolute;
left: 0;
height: 100%;
width: 85%;
overflow: hidden;
}
#mainMenu {
position: absolute;
left: 85%;
right: 0;
height: 100%;
}
#tablebody {
height: 100%;
width: 100%;
}
th.tableheaders {
border: 1px solid black;
height: 5%
}
td.someCols {
border: 1px solid black;
}
table,
th,
td {
border-collapse: collapse;
}
.innerstuffCols {
position: relative;
overflow-y: scroll;
width: 100%;
height: 100%;
}
div.stuffbox {
height: 200px;
position: absolute;
width: 200px;
left: 5px;
text-align: center;
background-color: #f1f1f1;
}
<div id="mainHeader">
<p align="center"> random header here </p>
</div>
<div id="mainPlace">
<div id="mainTable">
<table style='width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;border:1px solid black'>
<tr id='tableheader'>
<th class='tableheaders'>header 1</th>
<th class='tableheaders'>header 2</th>
</tr>
<tr id='tablebody'>
<td class='someCols'>
<div class='innerstuffCols'>
<div class='stuffbox' style='top:55px;'> stuff 1 </div>
<div class='stuffbox' style='top:265px;'> stuff 2 </div>
<div class='stuffbox' style='top:475px;'> stuff 3 </div>
<div class='stuffbox' style='top:685px;'> stuff 4 </div>
<div class='stuffbox' style='top:895px;'> stuff 5 </div>
<div class='stuffbox' style='top:1105px;'> stuff 6 </div>
</div>
</td>
<td class='someCols'>
<div class='innerstuffCols'>
some other stuff
</div>
</td>
</tr>
</table>
</div>
<div id="mainMenu">
<p> some stuff here </p>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
