lunghezza - prova css html




Crea un div al 100% dell'altezza della finestra del browser (20)

Ho un layout con due colonne: un div sinistro e un div destro.

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

Ho provato l' height:100% , min-height:100%; eccetera.


Questa roba ridimensionerà automaticamente l'altezza del contenuto in base al browser. Spero che questo funzioni per te. Basta provare questo esempio dato sotto.

Devi impostare solo height:100% .

  html,body {
  height:100%;
  margin:0;
}
.content {
  height:100%;
  min-height:100%;
  position:relative;
}
.content-left {
  height:auto;
  min-height:100%;
  float:left;
  background:#ddd;
  width:50%;
  position:relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll     #aaa;
  width:50%;
  position:relative;
  float:left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width:50%;
  float:left;
  position:relative;
  overflow-y:scroll;  
}
<div class='content' id='one'></div>
<div class='content-left' id='two'></div>


100vw === 100% della larghezza della finestra.

100vh === 100% dell'altezza della finestra.

Se si desidera impostare la larghezza o l'altezza del 100% della dimensione della finestra del browser, è necessario utilizzare

per larghezza: 100vw

per altezza: 100vh

o se si desidera impostare una dimensione più piccola utilizzare la calc function css. Esempio:

#example { width: calc(100vw - 32px) }


Anche se questa soluzione è fatta con jQuery I, potrebbe essere utile a chiunque faccia colonne per adattarsi alle dimensioni dello schermo.

Per le colonne che iniziano nella parte superiore della pagina, questa soluzione è la più semplice.

body,html{
  height:100%;
}

div#right{
  height:100%
}

Per le colonne che non iniziano nella parte superiore della pagina (ad esempio: se iniziano sotto l'intestazione).

<script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; // 100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

Il primo metodo applica all'altezza del corpo anche le colonne, il che significa che è starting_pixels + height100% .

Il secondo metodo ottiene l'altezza della pagina mostrata all'utente ottenendo l'altezza del corpo e quindi sottrae la dimensione dell'intestazione per sapere quanta altezza è rimasta per visualizzare la colonna.


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

Lunghezze Viewport-Percentage (o Viewport-Relative)

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 viewport), vw (larghezza viewport), vmin (lunghezza minima viewport) e vmax (lunghezza massima 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 è uguale 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 un esempio di JSFiddle che mostra un layout a due colonne che coinvolge sia vh che vw .

In che modo 100vh è diverso dal 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 tag p qui è impostato al 100% di altezza, ma poiché il suo div contenente 200px ha un'altezza, il 100% di 200 px diventa 200 px, non il 100% dell'altezza del body . Usare 100vh significa invece che il tag p sarà 100% altezza del body indipendentemente dall'altezza div . Dai un'occhiata a questo JSFiddle che accompagna facilmente per vedere la differenza!


Ecco una soluzione per l'altezza.

Nel tuo uso CSS:

#your-object: height: 100vh;

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

Aggiungi questo script (per aggiungere il rilevamento per le 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;
});

Infine usa questa funzione per aggiungere l'altezza della finestra a #your-object se il browser non supporta le vh-units :

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

Gli elementi di blocco consumano l'intera larghezza del genitore, per impostazione predefinita.

Questo è il modo in cui soddisfano i requisiti di progettazione, che è quello di impilare verticalmente.

9.4.1 Bloccare i contesti di formattazione

In un contesto di formattazione a blocchi, le caselle sono disposte una dopo l'altra, verticalmente, iniziando nella parte superiore di un blocco contenitore.

Questo comportamento, tuttavia, non si estende all'altezza.

Per impostazione predefinita, la maggior parte degli elementi è l'altezza del loro contenuto ( height: auto ).

A differenza della larghezza, è necessario specificare un'altezza se si desidera uno spazio aggiuntivo.

Pertanto, tieni a mente queste due cose:

  • a meno che non si desideri la larghezza completa, è necessario definire la larghezza di un elemento di blocco
  • a meno che tu non voglia l'altezza del contenuto, devi definire l'altezza di un elemento

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */
<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>


In questo caso puoi usare vh che è relativo all'1% dell'altezza del viewport ...

Ciò significa che se vuoi coprire l'altezza, usa semplicemente 100vh .

Guarda l'immagine che disegno per te qui:

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>


In realtà ciò che ha funzionato per me è l'utilizzo della proprietà vh, nella mia risposta l'app voleva che il div corrispondesse alla pagina in alto anche quando ridimensionata altezza: 100%; , overflow-y: auto; , nessuno di loro ha funzionato durante l'impostazione dell'altezza: (la tua percentuale) vh; ha funzionato come previsto. Nota: se usi padding, angoli arrotondati ecc. Assicurati di sottrarre quei valori dalla percentuale di proprietà vh o di aggiungere altezza extra e far apparire barre di scorrimento, ecco il mio esempio:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);

}

Prova ad impostare l' height:100% in html e body

html, 
body {
    height: 100%;
}

E se si desidera 2 div altezza dello stesso uso o impostare la display:flex dell'elemento genitore display:flex proprietà display:flex .


Prova il seguente css:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

Puoi usare display: flex e height: 100vh

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

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

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


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

Questo è ciò che ha funzionato per me:

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

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


Questo ha funzionato per me:

html, body {
    height: 100%; /* IMPORTANT!!! stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* min. height for modern browser */
    height:auto !important; /* important rule for modern Browser */
    height:100%; /* min. height for IE */
    overflow: hidden !important; /* FF scroll-bar */
}

Tratto da questa pagina .


Se usi la position: absolute; e jQuery, puoi usare

$("#mydiv").css("height", $(document).height() + "px");

Se vuoi impostare l'altezza di un <div> o di un elemento, devi impostare l'altezza di <body> e <html> al 100%. Quindi puoi impostare l'altezza dell'elemento con 100% :)

Ecco un esempio:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

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

Con l'avvento del modello flex CSS , risolvere il problema dell'altezza al 100% diventa molto, molto semplice: utilizzare l' height: 100%; display: flex height: 100%; display: flex sul genitore e flex: 1 sugli elementi figlio. 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 e da 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>

Scopri di più sul modello flex qui.


Una delle opzioni sta usando la tabella CSS. Ha un ottimo supporto per i browser, funziona anche su IE8.

Esempio JSFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>


più semplice:

html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  background: purple;
  margin: 0;
  padding: 0;
}
.fullheight {
  display: block;
  position: relative;
  background: red;
  height: 100%;
  width: 300px;
}
<html class="">

<body>
  <div class="fullheight">
    This is full height.
  </div>
</body>

</html>


Usa FlexBox CSS

Flexbox si adatta perfettamente a questo tipo di problema. Sebbene sia noto soprattutto per la disposizione dei contenuti in direzione orizzontale, Flexbox funziona in modo ottimale anche per i problemi di layout verticale. Tutto ciò che devi fare è avvolgere le sezioni verticali in un contenitore flessibile e scegliere quali espandere. Prenderanno automaticamente tutto lo spazio disponibile nel loro contenitore.





height