Altezza percentuale HTML 5 / CSS

176

Sto cercando di impostare un <div>a una certa altezza percentuale nei CSS, ma rimane solo le stesse dimensioni del contenuto al suo interno. Quando rimuovo l'HTML 5 <!DOCTYTPE html>, tuttavia, funziona, <div>occupando l'intera pagina come desiderato. Voglio che la pagina venga convalidata, quindi cosa devo fare?

Ho questo CSS sul <div>, che ha un ID di page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

html css height

— D. Strout
fonte

3

Ecco una spiegazione semplice e chiara della heightproprietà CSS con valori percentuali: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

risolve il problema DOCTYPE: stackoverflow.com/a/32215263/3597276

— Michael Benjamin,

371

Sto cercando di impostare un div ad una certa altezza percentuale nei CSS

Percentuale di cosa?

Per impostare un'altezza percentuale, l'elemento padre (*) deve avere un'altezza esplicita. Questo è abbastanza evidente, nel senso che se lasci l'altezza come auto, il blocco prenderà l'altezza del suo contenuto ... ma se il contenuto stesso ha un'altezza espressa in termini di percentuale del genitore ti sei fatto un po ' Cattura 22. Il browser si arrende e utilizza solo l'altezza del contenuto.

Quindi il genitore del div deve avere una heightproprietà esplicita . Anche se quell'altezza può anche essere una percentuale, se lo desideri, questo sposta il problema al livello successivo.

Se si desidera impostare l'altezza div in percentuale dell'altezza della finestra, tutti gli antenati del div, inclusi <html>e <body>, devono avere height: 100%, quindi esiste una catena di altezze percentuali esplicite fino al div.

(*: oppure, se il div è posizionato, il 'blocco contenitore', che è anche l'antenato più vicino da posizionare.)

In alternativa, tutti i browser moderni e IE> = 9 supportano nuove unità CSS relative all'altezza della finestra ( vh) e alla larghezza della finestra ( vw):

div {
    height:100vh; 
}

Vedi qui per maggiori informazioni .

— bobince
fonte

Anche se non funziona per l'orientamento dello schermo portrait stackoverflow.com/questions/23198237/...

— Dchris

1

Si prega di vedere la risposta di Brian Campbell di seguito credo che sia la soluzione corretta. Questa risposta sembra essere una soluzione alternativa e non risolve il problema reale.

— MG Developer

69

È necessario impostare l'altezza sugli <html>e <body>elementi pure; in caso contrario, saranno solo abbastanza grandi da adattarsi al contenuto. Per esempio :

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

Espandi frammento

— Brian Campbell
fonte

6

¬_¬ Mi ci sono voluti 20 minuti per capire che dovevo impostare anche l'altezza del documento al 100%. L'ho letto un po 'troppo tardi, ma è comunque geniale. sigh

— omninonsense il

Questo dovrebbe essere votato come risposta in quanto fornisce una soluzione a molte persone che vengono qui chiedendosi cosa si può fare di più, guardano la prima risposta e pensano che non sia possibile e si allontanano dal pensare se esiste un altro metodo senza leggere questo

— codefreaK

Sono d'accordo che questa è la risposta corretta, l'altezza non funziona perché è necessario impostare l'elemento genitore che è body e html. Questa risposta dovrebbe essere la risposta accettata.

— MG Developer

Questa non è una risposta corretta - se il contenuto è più grande di quello che si adatta all'altezza dello schermo, il resto del contenuto non è più visibile comunque, quindi l'altezza NON è stata impostata sul 100% della finestra del browser ma di nuovo sul 100% di contenuto. Forse non è logico, ma è quello che succede nei due browser principali, Firefox e Chrome: provalo. Quindi la risposta accettata è l'unica corretta.

— Nepdev,

15

La risposta di Bobince ti farà sapere in quali casi "altezza: XX%;" funzionerà o non funzionerà.

Se si desidera creare un elemento con un rapporto impostato (altezza:% della propria larghezza), il modo migliore per farlo è impostare efficacemente l'altezza usando padding-bottom. Esempio per quadrato:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

Il contenitore quadrato sarà fatto solo di imbottitura e il contenuto si espanderà per riempire il contenitore. Lungo articolo del 2009 su questo argomento: http://alistapart.com/article/creating-intrinsic-ratios-for-video

— Olex Ponomarenko
fonte

funziona alla grande. Si sente anche veloce nel browser durante il ridimensionamento di una pagina contenente oltre 100 elementi. Grazie!

— decano grande,

5

È possibile utilizzare 100vw / 100vh. CSS3 ci fornisce unità relative al viewport. 100vw indica il 100% della larghezza della finestra. 100VH; 100% dell'altezza.

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

— Ahmad Aghazadeh
fonte

4

Ciao! Per utilizzare la percentuale (%), è necessario definire la% dell'elemento padre. Se usi body {height: 100%} non funzionerà perché il genitore non ha una percentuale in altezza. In tal caso per poter lavorare su quell'altezza del corpo è necessario aggiungerlo in html {height: 100%}

In altri casi, per sbarazzarti di quella percentuale genitore che definisci puoi usare

body {altezza: 100VH}

vh sta per altezza del viewport

Penso che sia d'aiuto

— Md. A. Barik
fonte

2

A volte, potresti voler impostare in modo condizionale l'altezza di un div, ad esempio quando l'intero contenuto è inferiore all'altezza dello schermo. L'impostazione di tutti gli elementi padre su 100% interromperà il contenuto quando è più lungo della dimensione dello schermo.

Quindi, il modo per aggirare questo è impostare l'altezza minima:

Continua a consentire agli elementi principali di regolare automaticamente la loro altezza Quindi, nel div principale, sottrai le dimensioni in pixel dell'intestazione dell'intestazione e del piè di pagina da 100 Vh (unità di visualizzazione). In css, qualcosa del tipo:

altezza minima: calc (100vh - 246px);

100vh è la lunghezza totale dello schermo, meno i div circostanti. Impostando l'altezza minima e non l'altezza, il contenuto più lungo dello schermo continuerà a fluire, invece di essere tagliato.

— Jahmic
fonte