Come posso allungare un div al 100% dell'altezza pagina?

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

  •  11-09-2019
  •  | 
  •  

Domanda 

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

        </style>

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

Come posso allungare div all'altezza 100% della pagina?

È stato utile?

Soluzione

Prova (dovrebbe funzionare nella maggior parte dei browser): 

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

Altri suggerimenti

L'applicazione 

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

dovrebbe produrre l'effetto che stai cercando. È necessario che su tutti e tre.

Tuttavia, spesso non in realtà fare ciò che si pensa che potrebbe, e può essere problematico. tecniche di Faux-colonna o "piè di pagina appiccicoso" tendono a lavorare meglio. 

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

</style>

Questo funzionerà, come un esempio. 

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

Se si vuole farlo tramite JavaScript questo codice dovrebbe funzionare per la maggior parte dei browser 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>

È necessario impostare l'altezza di 100% per il corpo e si dovrebbe fare: 

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

html {
    height: 100%;
}

Questo non funziona se si dispone di un DOCTYPE. Sto cercando una risposta troppo, ma ho un DOCTYPE. Tuttavia, c'è un modo per farlo con un DOCTYPE, ma non funziona con due div galleggiante a destra ea sinistra accanto a vicenda, provare: 

(div-name) {
    position: absolute;
}

Essere consapevoli che questo non guardare bene a tutti quando si utilizzano due div galleggianti accanto a vicenda. Ma, tutto funziona bene per qualsiasi altro tipo.

Usa: 

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

In questo modo, sarà centrato e coprire la pagina se è più lungo di lunga vista del browser.

Questa è la soluzione più semplice che io sappia. Purtroppo, però, non funziona in Internet Explorer 8 e più anziani, in quanto non supportano l'unità vh (altezza finestra). 

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0;
}

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

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

Questo dovrebbe funzionare: 

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

Tuttavia, è possibile aggiungere un colore di sfondo o un bordo per assicurarsi che funzioni, altrimenti non sarà in grado di vedere in modo corretto.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top