Altezza percentuale HTML 5 / CSS

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

  •  06-07-2019
  •  | 
  •  

Domanda

Sto cercando di impostare un <div> su 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, il page occupa l'intera pagina come desiderato. Voglio che la pagina venga convalidata, quindi cosa devo fare?

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

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

Soluzione

  

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 che hai creato te stesso un po 'Cattura 22. Il browser si arrende e utilizza solo l'altezza del contenuto.

Quindi il genitore del div deve avere una proprietà height esplicita. Anche se tale 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 verso il basso al div.

(*: oppure, se il div è posizionato, il & # 8216; contenente il blocco & # 8217 ;, 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 .

Altri suggerimenti

Devi impostare l'altezza anche sugli elementi <html> e <body>; in caso contrario, saranno solo abbastanza grandi da adattarsi al contenuto. Ad 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>

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

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

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 il problema è impostare l'altezza minima:

Continua per 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.

  

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 lavorare su altezza corporea devi aggiungerlo in html{height:100%}

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

body {height: 100VH}

vh sta per altezza della finestra

Penso che aiuti

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