[英]How to make inner div with overflow:scroll stay inside outer div?
I have a table within a div within another div, like this: 我在另一个div的div内有一个表,如下所示:
<div id="outer">
<div class="inner">
<h4>Search results</h4>
<table>
<tr><th>Internal user</th><th>External domain</th><th># in</th><th>Last in</th><th># out</th><th>Last out</th><th>Is member</th></tr>
<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
<!-- Lots more data rows -->
</table>
</div>
</div>
The table body is dynamically generated by javascript. 表格主体是由javascript动态生成的。
The outer div has position:fixed
. 外部div的
position:fixed
。
The inner div has overflow:scroll
, and should always fill the outer div but never go outside its borders. 内部div具有
overflow:scroll
,应始终填充外部div,但切勿超出其边界。
Additionally: 另外:
bottom
set to auto
, the inner and outer divs should both expand to fit the entire table; bottom
设置为auto
,则内部和外部div都应扩展以适合整个表格;否则, or bottom
set to any fixed value (eg "10px"), the inner div should remain within the outer. bottom
设置为任何固定值(例如“ 10px”),则内部div应该保留在外部。 Similar rules should apply to the width of both divs depending on whether I set the outer div right
to either auto
or a fixed value. 类似的规则应适用于双方的div的宽度取决于我是否设置外层div
right
要么auto
或固定值。
The plan is that I start with bottom:auto
on the outer div while javascript generates the table body, so both divs expand to fit the table. 该计划是,我在外部div上从
bottom:auto
开始,而javascript生成了表格主体,因此两个div都进行了扩展以适合表格。
Then, after the table is complete, I compare the outer div's size to the viewport size. 然后,在完成表之后,我将外部div的大小与视口大小进行比较。 If the outer div's automatic size fits in the viewport, I leave it as
auto
, otherwise I set fixed values to make it fit in the viewport, and the user can scroll to see the rest of the table. 如果外部div的自动尺寸适合视口,则将其保留为
auto
,否则我将设置固定值以使其适合视口,并且用户可以滚动查看表格的其余部分。
Is there any single set of CSS rules that will achieve this, when the only properties I change in javascript are on the outer div? 当我在javascript中更改的唯一属性位于外部div上时,是否有任何一组CSS规则可以实现这一目标?
The closest I've got is to set both height:100%
and width:100%
on the inner div. 我最接近的是在内部div上同时设置
height:100%
和width:100%
。 The only problem with this is that the inner div's scrollbars go a few pixels outside the outer div. 唯一的问题是,内部div的滚动条在外部div外面几个像素。
I've also tried: 我也尝试过:
position:absolute
and left/top/right/bottom all to 0 on the inner div. position:absolute
内部div的position:absolute
和左/上/右/下均为0。 This makes both divs go to zero size when the outer div's size is auto
. auto
时,这两个div的大小都将变为零。 This would be simpler with only one div instead of two, but two borders of different colours provide better contrast in the web application this is designed for. 仅使用一个div而不是两个div会更简单,但是使用不同颜色的两个边框可以在为此设计的Web应用程序中提供更好的对比度。
Here's a JSFiddle: http://jsfiddle.net/jr5R2 这是一个JSFiddle: http : //jsfiddle.net/jr5R2
There need to add height: 100%
to both outer and inner div
需要增加
height: 100%
外部和内部div
均为height: 100%
#outer {
display: block;
position: fixed;
left: 1px;
top: 40px;
width: auto;
right: auto;
bottom: auto;
z-index: 1000;
border: 2px solid silver;
height: 100%;
}
#outer .inner {
background-color: white;
border: 1px solid black;
padding: 2px;
overflow-y: scroll;
height: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.