Wie kann ich ein Div auf 100% Seite Höhe strecken?

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

  •  11-09-2019
  •  | 
  •  

Frage 

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

        </style>

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

Wie kann ich div auf 100% Höhe Seite strecken?

War es hilfreich?

Lösung

Versuchen (es sollte in den meisten Browsern funktionieren): 

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

Andere Tipps

Anwenden 

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

sollte die Wirkung ergeben, die Sie suchen. Sie müssen es auf allen drei.

Es ist jedoch oft nicht wirklich tun, was Sie denken, es könnte, und kann problematisch sein. Faux-Säule Techniken oder „sticky Fußzeilen“ neigen dazu, besser zu arbeiten. 

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

</style>

Dies funktioniert, als Beispiel. 

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

Wenn Sie es über JavaScript dieser Code tun möchten, sollten für die meisten DOM Browsern funktionieren ... 

<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>

Sie sollten 100% Höhe für den Körper gesetzt und es sollte tun: 

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

html {
    height: 100%;
}

Das wird nicht funktionieren, wenn Sie eine DOCTYPE haben. Ich bin auf der Suche nach einer Antwort zu, aber ich habe eine DOCTYPE. Allerdings gibt es eine Möglichkeit, es mit einem DOCTYPE zu tun, aber es funktioniert nicht mit zwei divs floaten gelassen und direkt neben ihnen, versuchen Sie: 

(div-name) {
    position: absolute;
}

Beachten Sie, dass dies überhaupt nicht gut aussehen, wenn zwei divs mit nebeneinander schwimmen. Aber es funktioniert gut für jede andere Art.

Verwendung: 

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

Auf diese Weise wird die Seite zentriert und decken werden, wenn sie länger als ein Browser-Ansicht lang ist.

Hier ist die einfachste Lösung, die ich kenne. Doch leider funktioniert es nicht in Internet Explorer 8 und älter, als sie die vh (Darstellungshöhe) -Einheit nicht unterstützen. 

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0;
}

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

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

Dies sollte funktionieren: 

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

Sie können jedoch wollen eine Hintergrundfarbe oder Grenze hinzuzufügen, um sicherzustellen, dass es funktioniert, sonst werden Sie nicht in der Lage sein, um es richtig zu sehen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top