How to configure a child div to display scrollbars only when a parent div percentage settings require it_问答_开发者

How to configure a child div to display scrollbars only when a parent div percentage settings require it

开发者 https://www.devze.com 2023-01-07 12:46 出处：网络

I am dealing with a pretty standard (or so I thought) page. What I would like to do is allow the page to have it\'s width determined by the <body> tag and a top level .page style that I\'ve defi

相关专题：css

I am dealing with a pretty standard (or so I thought) page. What I would like to do is allow the page to have it's width determined by the <body> tag and a top level .page style that I've defined in my css. My site has a left navigation pane that is ALWAYS a certain width. The "content" area stretches with the page and should determined by the remaining space that consumes the users screen.

I'd like to show scrollbars on 开发者_如何学Pythoncontent that does not "keep the peace" with my floating area width. For example, I've recently come upon a series of sub elements that need scrollbars displayed to keep the page from stretching off into eternity.

Here is a simple image of how things look when scrollbars aren't needed:

How to configure a child div to display scrollbars only when a parent div percentage settings require it

Here is what it looks like when my sub content is wider than the page:

How to configure a child div to display scrollbars only when a parent div percentage settings require it

What I'd like to do is show scrollbars on the red sections when they fulfill their allowed space (including margins and padding). I would like for everything to be padded nicely against the blue section so that the yellow and white sections don't get overlapped.

I've attached the html that I used to make up this display, because I couldn't think of a better way to describe my approach:

<html>
<head>
    <style type="text/css">
        body
        {
            background-color: gray;             
        }

        .page /* page is always centered on screen */
        {
            background-color: white;
            width: 90%; 
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
        }

        .nav-pane /* navigation pane is always 100px */
        {
            width: 100px;
            height: 100%;
            background-color: green;
        }

        .nav-pane > div
        {
            width: 100px;
        }

        .content-pane /* content pane should size with page */
        {
            background-color: yellow;
            margin: 10px;         
        }

        .content-pane > div /* !!! SHOULD NOT STRETCH !!! */
        {
            position: relative;
            overflow: auto;
            background-color: blue;
            padding: 10px;
            margin: 10px;
            color: white;
        }

        .content-pane > div > *
        {
            clear: both;
        }

        .content /* content div holds tables, images, paragraphs, etc.. */
        {
            background-color: red;
            float: left;
            margin-bottom: 20px;
        }

        #small /* one is small */
        {
            width: 200px;
        }

        #big /* one is BIG! */
        {
            width: 4000px;
        }
    </style>
</head>
<body>
    <div class="page">
        <table width="100%" style="border: solid black">
            <tr>
                <td class="nav-pane">
                    <div>
                        I am the nav-pane
                    </div>
                </td>
                <td class="content-pane">
                    <div>
                        I am the content pane

                        <h2>I am a heading</h2>
                        <div class="content">
                            <div id="small">Scrollbar not needed</div>
                        </div>

                        <h2>I too am a heading</h2>
                        <div class="content">
                            <div id="big">I require a scroll bar to keep this page pretty... :(</div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Is what I'm trying to do even possible without using javascript?

Thanks in advance for any insight...

Adding to your table a table-layout: fixed styling should achieve what I believe you are wanting. Add it either inline (like you are already doing) or as part of your css (what I would consider the better way).

Explanation: Your issue resides in the fact that the div is in a table, which by default a table cell expands to fit its content. Setting the table so that it remains a fixed size by using the table-layout property prevents the table from increasing size. Of course, the scroll bar that comes from it will actually be on the table, not the div.