All geek questions in one place

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

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

        </style>

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

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

+3
source share
10 answers

Try it (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. */
}
+8
source

Application

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

should give the effect you are looking for. You need it on all three.

However, he often does not actually do what, in your opinion, can and can be problematic. Colossal column techniques or “sticky footers” tend to work better.

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

</style>
+1

100% , :

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

.

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

:

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

, , .

+1

JavaScript, DOM...

<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>
+1
html {
    height: 100%;
}

, DOCTYPE. , DOCTYPE. , DOCTYPE, div, eachother, :

(div-name) {
    position: absolute;
}

, div, eachother. .

+1

, . , , Internet Explorer 8 , vh ( ).

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0;
}

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

</div>
</body>
</html>
+1

:

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

However, you can add a background color or border to make sure it works, otherwise you won’t be able to see it correctly.

-1
source

Source: https://habr.com/ru/post/1709789/

More articles:


All Articles