Domanda Come creare un div al 100% dell'altezza della finestra del browser?


Ho un layout con due colonne: una sinistra div e un diritto div.

La destra div ha un grigio background-colore ho bisogno che si espanda verticalmente a seconda dell'altezza della finestra del browser dell'utente. In questo momento il background-color finisce con l'ultimo pezzo di contenuto in questo div.

ho provato height:100%, min-height:100%; eccetera.


1680
2017-10-15 21:18


origine


risposte:


Ci sono un paio di unità di misura CSS3 chiamate:

Finestra-Percentuale (o Viewport-Relative) lunghezze

Quali sono le lunghezze percentuali di Viewport?

Dalla Raccomandazione del Candidato W3 collegata sopra:

Le lunghezze percentuali di visualizzazione sono relative alla dimensione del blocco contenitore iniziale. Quando l'altezza o la larghezza del blocco contenitore iniziale viene modificata, vengono ridimensionati di conseguenza.

Queste unità sono vh (altezza del viewport), vw (larghezza della finestra), vmin (lunghezza minima della vista) e vmax (lunghezza massima del viewport).

Come può essere usato per fare in modo che un divisore riempia l'altezza del browser?

Per questa domanda, possiamo fare uso di vh: 1vh è pari all'1% dell'altezza del viewport. Vale a dire, 100vh è uguale all'altezza della finestra del browser, indipendentemente da dove si trova l'elemento nell'albero DOM:

HTML

<div></div>

CSS

div {
    height:100vh;
}

Questo è letteralmente tutto ciò che è necessario. Ecco un Esempio JSFiddle di questo in uso.

Quali browser supportano queste nuove unità?

Questo è attualmente supportato su tutti i principali browser aggiornati oltre a Opera Mini. Check-out Posso usare... per ulteriore supporto.

Come può essere usato con più colonne?

Nel caso della domanda in questione, con un divisore sinistro e uno destro, ecco a Esempio JSFiddle mostrando un layout a due colonne che coinvolge entrambi vh e vw.

Com'è 100vh diverso da 100%?

Prendi questo layout per esempio:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

Il p il tag qui è impostato al 100% di altezza, ma perché è contenuto div ha un'altezza di 200 px, il 100% di 200 px diventa 200 px, non 100% del body altezza. utilizzando 100vh invece significa che il p il tag sarà al 100% dell'altezza del body indipendentemente da div altezza. Guarda questo accompagnando JSFiddle per vedere facilmente la differenza!


2363
2018-05-30 13:33



Se si desidera impostare l'altezza di a <div> o qualsiasi elemento, dovresti impostare l'altezza di <body> e <html> anche al 100%. Quindi puoi impostare l'altezza dell'elemento con 100% :)

Ecco un esempio:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

520
2017-12-11 13:10



Se sei in grado di posizionare in modo assoluto i tuoi elementi,

position: absolute;
top: 0;
bottom: 0;

lo farei


241
2017-10-15 21:31



Puoi usare l'unità view-port in CSS:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height:100vh; /*vh stands for view-port height, 1vh is 1% of screen height*/
}

127
2018-05-04 11:11



Tutte le altre soluzioni, inclusa quella con votazione migliore vh sono sub-ottimali rispetto al modello flessibile soluzione.

Con l'avvento del Modello flex CSSrisolvere il problema dell'altezza del 100% diventa molto, molto semplice: utilizzare height: 100%; display: flexsul genitore, e flex: 1 sugli elementi del bambino. Prenderanno automaticamente tutto lo spazio disponibile nel loro contenitore.

Nota quanto sono semplici il markup e il CSS. Nessun hack da tavolo o altro.

Il modello flex è supportato da tutti i principali browser così come IE11 +.

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

Ulteriori informazioni su modello flessibile Qui.


85
2018-06-12 14:14



Non menzioni alcuni dettagli importanti come:

  • La larghezza del layout è fissa?
  • Una o entrambe le colonne hanno una larghezza fissa?

Ecco una possibilità:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

Ci sono molte variazioni su questo a seconda di quali colonne devono essere riparate e quali sono liquide. Puoi farlo anche con il posizionamento assoluto, ma in genere ho trovato risultati migliori (soprattutto in termini di cross-browser) usando i float.


47
2017-10-15 23:13



Puoi usare vh in questo caso che è relativo a 1% dell'altezza del viewport.

Ciò significa che se vuoi coprire l'altezza, basta usare 100vh.

Guarda l'immagine che disegno per te qui:

How to make a div 100% height of the browser window?

Prova lo snippet che ho creato per te come indicato di seguito:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>


40
2018-06-03 17:43



Ecco una soluzione per l'altezza.

Nel tuo uso CSS:

#your-object: height: 100vh;

Per i browser che non supportano vh-units, usa modernizr.

Aggiungi questo script (per aggiungere il rilevamento per vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

Finalmente usa questa funzione per aggiungere l'altezza del viewport a #your-object se il browser non supporta vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

25
2017-08-21 16:57



Questo è ciò che ha funzionato per me:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>

Uso position:fixed invece di position:absoluteIn questo modo, anche se scorri verso il basso, la divisione si espanderà alla fine dello schermo.


24
2017-07-27 16:18