Set div to remaining height using CSS with unknown height divs above and below

前端 未结 4 1180
死守一世寂寞
死守一世寂寞 2020-12-04 13:11

Is it possible to make the wrapper fill the window height (no scrolling) and the center div scrollable without messing around with pixels and javascript?

<         


        
相关标签:
4条回答
  • 2020-12-04 13:37

    A cross-browser solution derived from Dan Dascalescu answer:

    http://jsfiddle.net/Uc9E2

    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    .l-fit-height {
        display: table;
        height: 100%;
    }
    .l-fit-height-row {
        display: table-row;
        height: 1px;
    }
    .l-fit-height-row-content {
        /* Firefox requires this */
        display: table-cell;
    }
    .l-fit-height-row-expanded {
        height: 100%;
        display: table-row;
    }
    .l-fit-height-row-expanded > .l-fit-height-row-content {
        height: 100%;
        width: 100%;
    }
    @-moz-document url-prefix() {
        .l-scroll {
            /* Firefox requires this to do the absolute positioning correctly */
            display: inline-block;
        }
    }
    .l-scroll {
        overflow-y: auto;
        position: relative;
        height: 1000px;
    }
    .l-scroll-content {
        position: absolute;
        top: 0;
        bottom: 0;
        height: 1000px;
        min-height:100px;
    }
    <div class="l-fit-height">
        <section class="l-fit-height-row">
            <div class="l-fit-height-row-content">
                <p>Header</p>
            </div>
        </section>
        <section class="l-fit-height-row-expanded">
            <div class="l-fit-height-row-content l-scroll">
                <div class="l-scroll-content">
                    <p>Foo</p>
                </div>
            </div>
        </section>
        <section class="l-fit-height-row">
            <div class="l-fit-height-row-content">
                <p>Footer</p>
            </div>
        </section>
    </div>

    0 讨论(0)
  • 2020-12-04 13:40

    Using overflow:auto will let you do this.

    demo

    0 讨论(0)
  • 2020-12-04 13:41

    2014 UPDATE: The modern way to solve this layout problem is to use the flexbox CSS model. It's supported by all major browsers and IE11+.


    2012: The correct way to do this with CSS alone is to use display: table and display: table-row. These are supported by all major browsers, starting with IE8. This is not using tables for display. You'll use divs:

    html, body {
        height: 100%;
        margin: 0;
    }
    .wrapper {
        display: table;
        height: 100%;
        width: 100%;
        background: yellow;  /* just to make sure nothing bleeds */
    }
    .header {
        display: table-row;
        background: gray;
    }
    .content {
        display: table-row;  /* height is dynamic, and will expand... */
        height: 100%;        /* ...as content is added (won't scroll) */
        background: turquoise;
    }
    .footer {
        display: table-row;
        background: lightgray;
    }
    <div class="wrapper">
        <div class="header">
            <h1>Header</h1>
            <p>Header of variable height</p>
        </div>
        <div class="content">
            <h2>Content that expands in height dynamically to adjust for new content</h2>
            Content height will initially be the remaining
            height in its container (<code>.wrapper</code>).
            <!-- p style="font-size: 4000%">Tall content</p -->
        </div>
        <div class="footer">
            <h3>Sticky footer</h3>
            <p>Footer of variable height</p>
        </div>
    </div>

    That's it. The divs are wrapped as you'd expect.

    0 讨论(0)
  • 2020-12-04 13:50

    So what you are talking about is a sticky footer. I went and did some more research and here is what I have for you.

    <div id="wrapper" style="height:100%">
    <div id="header" style="float:none;"><h1>Header</h1></div>
    
    <div style="overflow:scroll;float:none;height:auto;">high content</div>
    
    <div id="footer" style="clear:both;position:fixed;bottom:0px;"><h1>Footer</h1></div>
    </div>
    

    This will give you a sticky footer. The key is position:fixed and bottom:0px; Unfortunately this means it also hovers above any content in the scrollview. So far there seems to be only Javascript to figure this out but I will keep looking.

    0 讨论(0)
提交回复
热议问题