CODEWITHSUNDEEP
cssheight
uzay95
uzay95

Reputation: 16632

How can I stretch a div to 100% page 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?

Upvotes: 2

Views: 10480

Answers (9)

Josh
Josh

Reputation: 11

Here is the simplest solution that I know of. Unfortunately, however, it doesn't work in Internet Explorer 8 and older, as they do not support the vh (viewport height) unit.

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0;
}

#full-height{
  min-height: 100vh;
}
</style>
</head>
<body>
<div id='full-height'>

</div>
</body>
</html>

Upvotes: 1

stevedbrown
stevedbrown

Reputation: 8934

Use:

{
    position: absolute;
    top: 0px;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
}

This way, it will be centered and cover the page if it is longer than one browser view long.

Upvotes: 1

eKek0
eKek0

Reputation: 23289

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. */
}

Upvotes: 8

Zachary Anderson
Zachary Anderson

Reputation: 121

html {
    height: 100%;
}

This will not work if you have a DOCTYPE. I'm looking for an answer too, but I have a DOCTYPE. However, there is a way to do it with a DOCTYPE, but it doesn't work with two divs floating left and right next to eachother, try:

(div-name) {
    position: absolute;
}

Be aware that this doesn't look good at all when using two divs floating next to eachother. But, it works fine for any other type.

Upvotes: 1

brokenisfixed
brokenisfixed

Reputation: 653

You should set 100% height for the body and it should do:

body {
...
height:100%;
...
}

Upvotes: 1

user110714
user110714

Reputation:

If you want to do it via JavaScript this code should work for most DOM browsers...

<div id="fullDiv" style="border: solid 2px black;">
    Hello example
</div>

<script type="text/javascript">

    var div = document.getElementById('fullDiv');

    div.style.height = document.documentElement.clientHeight + 'px';

</script>

Upvotes: 1

Michael Todd
Michael Todd

Reputation: 17051

This will work, as an example.

<div style="width:100%; height:100%; border-style:solid; border-width:5px;">
  test
</div>

Upvotes: 1

Gabriel Hurley
Gabriel Hurley

Reputation: 40052

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.

Upvotes: 6

TStamper
TStamper

Reputation: 30364

<style>
.100PercentHeight{margin:0; height:100%}

</style>

Upvotes: 1

Related Questions