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

StackOverflow https://stackoverflow.com/questions/951712

  •  11-09-2019
  •  | 
  •  

Question 

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

        </style>

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

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

Was it helpful?

Solution

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

OTHER TIPS

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.

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

</style>

This will work, as an example.

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

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>

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

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

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.

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.

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>

This should work:

<style type="text/css">
    html, body, .100PercentHeight {
        height: 100%;
        margin: -10px 0px 0px -10px;
    }
</style>

However, you may want to add a background colour or border to make sure it works, else you won't be able to see it properly.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top