Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I stretch a div to 100% page height?

Tags:

css

height

<html>
    <head>
        <style>
            .100PercentHeight{ }
        </style>

        </style>

    <body>
        <div class='100PercentHeight'>hihi</div>
    </body>
</html>

How can I stretch div to 100% height of page?

like image 913
uzay95 Avatar asked Dec 18 '25 03:12

uzay95


2 Answers

Try (it should work in most browsers):

.100PercentHeight, html, body {
    height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
    height : 100%;            /* Internet Explorer treats as min-height. */
    min-height : 100%;        /* Internet Explorer ignores this. */
}
like image 186
eKek0 Avatar answered Dec 20 '25 16:12

eKek0


Applying

html, body, .100PercentHeight{
    height:100%;
}

should yield the effect you're looking for. You need it on all three.

However, it often doesn't actually do what you think it might, and can be problematic. Faux-column techniques or "sticky footers" tend to work better.

like image 30
Gabriel Hurley Avatar answered Dec 20 '25 16:12

Gabriel Hurley



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!