Perché l'altezza non funziona: il 100% lavora per espandere i div all'altezza dello schermo?

295

Voglio che il carosello DIV (s7) si espanda all'altezza dell'intero schermo. Non ho idea del perché non ci riesca. Per vedere la pagina puoi andare qui .

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

Espandi frammento

html css height

— Earl Larson
fonte

2

Ecco una spiegazione semplice e chiara: stackoverflow.com/a/31728799/3597276

— Michael Benjamin,

Probabilmente la soluzione migliore per gli elementi nidificati che non dovrebbe allungare per l'altezza complessiva della finestra stackoverflow.com/questions/7049875/height-100-not-working/...

— B-Gangster

409

Affinché un valore percentuale funzioni in altezza, è necessario determinare l'altezza del genitore. L'unica eccezione è l' elemento radice<html> , che può essere un'altezza percentuale. .

Quindi, hai dato l'altezza a tutti i tuoi elementi, ad eccezione di <html>, quindi quello che dovresti fare è aggiungere questo:

html {
    height: 100%;
}

E il tuo codice dovrebbe funzionare bene.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

Espandi frammento

Esempio JsFiddle .

— Il fantasma di Madara
fonte

23

Ok, quindi questo potrebbe farmi sembrare incredibilmente stupido, ma comunque : vuoi dire che <html>è un elemento reale - proprio come <p>o <img />? Ho pensato che l'unico scopo di <html>fosse definire l'inizio e la fine di un documento HTML. Voglio dire, pensavo che fosse lì, non per il layout, ma solo per questo il browser conosce il tipo di documento che sta guardando? Sono completamente sbalordito.

— jay_t55

29

@Joey: HTML è un elemento reale. Puoi modellarlo con CSS, agganciargli eventi in JavaScript, aggiungere classi e ID ad esso, e appare nel DOM. Il browser assumerà un documento HTML anche senza il <html>tag e anche senza gli elementi <head>o <body>. Tuttavia, le specifiche HTML ritengono <html>obbligatorio il tag. In breve, sì, è un elemento completo come tutti gli altri elementi HTML.

— Madara's Ghost

1

@SecondRikudo: No, il <html>tag è facoltativo in base alle specifiche (ad es. HTML4 e HTML5). E sì, l'elemento viene comunque creato.

— Robert Siemer,

2

hmmm ... per me, l'unico modo in cui ha funzionato è stato impostare sia htmle bodycome height: 100%(oltre ovviamente allo specifico divche voglio ereditare l'altezza del 100%)

— james

1

@james Sì, tutti i genitori devono avere un'altezza nota.

— Madara's Ghost

147

_{Dal momento che nessuno ha menzionato questo ..}

Approccio moderno:

In alternativa all'impostazione di entrambe le altezze dell'elemento html/ , è possibile utilizzare anche le lunghezze in percentuale della finestra:body100%

5.1.2. Lunghezze percentuali viewport: le unità 'vw', 'vh', 'vmin', 'vmax'

Le lunghezze in percentuale della finestra sono relative alla dimensione del blocco contenente iniziale. Quando l'altezza o la larghezza del blocco contenitore iniziale viene modificata, vengono ridimensionate di conseguenza.

In questo caso, è possibile utilizzare il valore 100vh(che è l'altezza della finestra) - (esempio)

body {
    height: 100vh;
}

L'impostazione di min-heightfunziona anche. (esempio)

body {
    min-height: 100vh;
}

Queste unità sono supportate nella maggior parte dei browser moderni: il supporto è disponibile qui .

— Josh Crozier
fonte

1

Non vedo alcun beneficio per questo. Non crea lavoro extra per il browser che deve calcolare tutto ciò che riguarda la vista del browser? Il dimensionamento delle finestre sembra utile solo quando si desidera dimensionare effettivamente qualcosa correlato all'altezza del browser.

— Robert è andato l'

12

@RobertWent Ci sono vantaggi. Ad esempio, height: 100%funziona solo se l'elemento padre ha un'altezza definita. Vi sono certamente alcuni casi in cui il genitore di un elemento non ha un'altezza definita e le unità percentuali di viewport lo risolvono. In altre parole, se avessi un elemento profondamente annidato, potresti semplicemente impostarlo 100vhe avrebbe un'altezza del 100%browser. Potresti non vedere alcun vantaggio, ma sono stato in numerosi casi in cui erano l'unica soluzione. Queste unità potrebbero non essere altrettanto vantaggiose per gli elementi radice come html/ body, ma ciò nonostante, questa è un'alternativa

— Josh Crozier,

2

Ma stiamo parlando dell'elemento corpo, non di un elemento profondamente annidato. Esiste un solo genitore possibile, l'elemento html. Questo è il motivo per cui ho detto che non vedo alcun vantaggio ed è probabilmente peggio che impostare solo il 100%. Il tuo commento non dice nulla per farmi dimagrire altrimenti. Solo perché qualcosa di nuovo non lo rende migliore. È comunque un'alternativa.

— Robert è andato l'

4

Un problema con questo approccio è che iPhone esclude la barra degli indirizzi e la navigazione inferiore dall'altezza della vista, il che significa che body { height: 100vh }avrà una barra di scorrimento al caricamento della pagina iniziale.

— BHOLT

2

Bello. Ho provato l'altro approccio, ho messo height: 100% !important" to each parent til html` senza successo, ho potuto vedere nella dom che ogni nodo dell'albero era in realtà 100%ma non riuscivo a impostare il 100% nell'elemento desiderato, ma con lo stile del viewport era facile

— pmiranda,

25

Dovrai anche impostare l'altezza del 100% htmlsull'elemento:

html { height:100%; }

— shanethehat
fonte

20

In alternativa, se si utilizza position: absoluteallora height: 100%funzionerà bene.

— Steve Tauber
fonte

4

Sarebbe un'ottima soluzione se non stessi usando flexbox per creare il mio layout. : /

— Landon Chiama il

2

Non dimenticare di impostare width:100%;e il genitore position:relative;.

— Kai Noack,

8

Dovresti provare con gli elementi padre;

html, body, form, main {
    height: 100%;
}

Quindi questo sarà sufficiente:

#s7 {
   height: 100%;
}

— mrbengi
fonte

5

se vuoi, ad esempio, una colonna a sinistra (altezza 100%) e il contenuto (altezza auto) puoi usare assoluto:

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

in html:

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

— YellowMart
fonte

2

Questo potrebbe non essere l'ideale, ma puoi sempre farlo con JavaScript. O nel mio caso jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

— oBo
fonte

5

Non è mai una buona idea usare javascript quando sarà sufficiente solo CSS.

— Bosworth99,

1

Perché anche fare qualcosa del genere e complicarla più di quanto dovrebbe essere? Non capisco alcune risposte lol ...

— CapturedTree

1

Nella fonte della pagina vedo quanto segue:

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

Se inserisci il valore di altezza nel tag, userà questo invece dell'altezza definita nel file css.

— Steven
fonte

È strano perché questo è quello che vedo nell'origine della pagina: <div class = "holder"> <tr> <td> <div id = "s7"> <div id = "posts">

— Earl Larson

Ok, anche se non so come hai ottenuto il tuo codice sopra, sono entrato e ho cambiato <div id = "s7"> in <div id = "s7" style = "height: 100%;"> e ha funzionato. Forse mi sta nascondendo qualcosa? In ogni caso, grazie :)

— Earl Larson,

1

Se posizioni assolutamente gli elementi all'interno del div, puoi impostare l'imbottitura superiore e inferiore al 50%.

Quindi qualcosa del genere:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

— Keith Brown
fonte

1

Non vedo come potrebbe funzionare poiché il 50% è relativo alla larghezza e non all'altezza dell'elemento contenitore, o mi manca qualcosa qui?

— DrLightman,

0

Ecco un'altra soluzione per le persone che non vogliono usare html, body, .blah { height: 100% }.

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

Espandi frammento

— TheMisir
fonte