在td内制作具有可定义绝对位置的div的可滚动div [英] making a scrollable div, inside of a td, with divs that have absolute positions defined
问题描述
如何使用CSS属性允许具有嵌套 div s的嵌套嵌套 div s的 div 定位到绝对位置，从而能够滚动一次那些 div 位于其父 div 之外?
How would one go about using CSS properties to allow a div with nested divs, which have absolute position defined, to be able to scroll once the defined position of those divs goes outside of their parent div?
我已经将我的项目精简为(希望)仅包含您下面的内容，并且我认识到有很多更干净的方法可以用来处理我在此处展示的示例，但是我认为值得一提，因为有人可能有我(和其他人)可以学习的见识.在我的示例中，将 div 个框"(它们具有 class = stuffbox )放置在 div (具有 class= innerstuffcols )，它们溢出了其父 div 的垂直边界.
I've stripped down my project to (hopefully) contain only what you need below, and I recognize that there are much cleaner ways to do this with the example that I'm presenting here, but figure it's worth asking because someone may have insight that I (and others) can learn from.
In my example, there are div 'boxes' (they have class=stuffbox) being placed inside of a div (has class=innerstuffcols) and they overflow the vertical bounds of their parent 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>如上所述，我知道在我的示例所展示的范围内，存在更好的方法来执行此操作(使位置不同于绝对值等)，但由于与大型项目有关的各种原因，(目前是出于学术上的好奇心)我更希望看到一个解释，说明如何使上面的示例正常工作，同时保持这些 div 的绝对位置.
As mentioned, I know that within the scope of only what is presented in my example, there are better ways to do this (making position something other than absolute, etc..) but for various reasons related to the much larger project (and at this point - academic curiosity) I'd prefer to see an explanation of how to get the example above working while keeping those divs with their absolute position.
很抱歉，如果问题的措辞不佳(请告诉我，我会再对此进行尝试)，但希望该示例可以使我的意图明确.
Apologies if the wording of the question is poor (let me know and I'll take another shot at it), but hopefully the example makes my intention clear.
谢谢.
推荐答案
使用 position:relative 导致绝对定位的元素相对于该容器定位，并且 overflow:scroll使其可滚动.(您也可以省略div并直接在表cel上执行此操作.)
Use position:relative to cause the absolute-positioned elements to be positioned relative to that container, and overflow:scroll to make it scrollable. (You could also omit the div and do this directly on the table 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>这篇关于在td内制作具有可定义绝对位置的div的可滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
