javascript - How to make inner div with overflow:scroll stay inside outer div? - Stack Overflow

admin管理员组

文章数量:1287612

I have a table within a div within another div, like this:

<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>pany</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.
The outer div has position:fixed.
The inner div has overflow:scroll, and should always fill the outer div but never go outside its borders.

Additionally:

• If the outer div has bottom set to auto, the inner and outer divs should both expand to fit the entire table; or
• If the outer div has bottom set to any fixed value (e.g. "10px"), the inner div should remain within the outer.

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.

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.
Then, after the table is plete, I pare the outer div's size to the viewport size. 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.

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?

The closest I've got is to set both height:100% and width:100% on the inner div. The only problem with this is that the inner div's scrollbars go a few pixels outside the outer div.

I've also tried:

• Not setting any dimensions on the inner div. This makes it always size to the table, ignoring the size of the outer div; and
• Setting position:absolute and left/top/right/bottom all to 0 on the inner div. This makes both divs go to zero size when the outer div's size is auto.

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.

Here's a JSFiddle:

I have a table within a div within another div, like this:

<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>pany.</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.
The outer div has position:fixed.
The inner div has overflow:scroll, and should always fill the outer div but never go outside its borders.

Additionally:

• If the outer div has bottom set to auto, the inner and outer divs should both expand to fit the entire table; or
• If the outer div has bottom set to any fixed value (e.g. "10px"), the inner div should remain within the outer.

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.

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.
Then, after the table is plete, I pare the outer div's size to the viewport size. 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.

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?

The closest I've got is to set both height:100% and width:100% on the inner div. The only problem with this is that the inner div's scrollbars go a few pixels outside the outer div.

I've also tried:

• Not setting any dimensions on the inner div. This makes it always size to the table, ignoring the size of the outer div; and
• Setting position:absolute and left/top/right/bottom all to 0 on the inner div. This makes both divs go to zero size when the outer div's size is auto.

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.

Here's a JSFiddle: http://jsfiddle/jr5R2

• javascript
• html
• css

Share Improve this question Follow asked Jul 24, 2014 at 5:05 Emma LeisEmma Leis 2,92066 gold badges2828 silver badges4242 bronze badges 3

• 1 You can add multiple borders with the ::before and ::after pseudo elements. See css-tricks./snippets/css/multiple-borders – JosephSlote Commented Jul 24, 2014 at 5:10
• @Joebot - That could be useful, except with overflow:scroll, the pseudo-element border appears inside the scrollbars when I want it outside. – Emma Leis Commented Jul 24, 2014 at 5:46
• @Joebot - Upvote for your link. I was not aware of the outline property, which produces exactly the look and behaviour I want. – Emma Leis Commented Jul 24, 2014 at 5:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

There need to add height: 100% to both outer and inner div

DEMO

#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%;     
}

本文标签： javascriptHow to make inner div with overflowscroll stay inside outer divStack Overflow