stretch div (section) to full page height

Question

I have header on page and the rest is content of page.

Now I need to fill up whole page with backgrout (without header)

<html>
    <body>
        <header style="background:none repeat scroll 0 0 #fff;">
             <div id="logo"><img src="xy.jpg" /></div>
        </header>
        <section style="background:none repeat scroll 0 0 #f0efed;">
             <div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </div>
        </section>
    </body>
</html>

It work for long pages ... longer then page height. But on short pages like this, it doesn't work.

If I use some examples working with forcing height 100% via min-height 100% like this Stretching a content div (under a header) to full page length

it's works for short pages

but on long pages background is cutted at 100% of page height and text goes down (page is longer that 100%)

I found only one function solution and it do it via javascript on load and on resize

if (parseInt($("section").css('height'), 10) < $(window).height() - parseInt($("header").css('height'), 10)) $("section").css('height', ($(window).height() - parseInt($("header").css('height'), 10)) + 'px');

Answer 1

If you can afford to support only modern browsers (for Internet Explorer this means version 10+), you can use Flexible Box Layout :

body {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
section {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

You may prefer to use the main element (or a div wrapper) instead of section in the case that you have multiple sections:

<html>
    <style>
    body {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        min-height: 100vh;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    main {
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #f0efed;
    }
    </style>
    <body>
        <header style="background:none repeat scroll 0 0 #fff;">
             <div id="logo"><img src="xy.jpg" /></div>
        </header>
        <main role='main'>
            <section>
                <div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt
                mollit anim id est laborum.
                </div>
            </section>
        </main>
    </body>
</html>

You can read more about it at Solved by Flexbox .

stretch div (section) to full page height

Question

1 answers

solution1
0 2014-08-15 07:10:33

stretch div (section) to full page height

Question

1 answers

solution1 0 2014-08-15 07:10:33

solution1
0 2014-08-15 07:10:33