2009-10-02 10 views
15

Ok, sto cercando di ottenere un div in scala e l'altezza è sempre l'altezza della finestra. Ho intenzione di collegare i miei esempi in quanto ha bisogno di spiegazioni.Div divisioni totali altezza vista solo css no js ... Possibile?

www.madmediablitz.com/tv/precentdemo.html

Il link qui sopra è il più vicino Sono venuto a una soluzione e spero che qualcuno qui troverà semplice da risolvere. Quello che voglio succedere è che la tv sia sempre l'altezza del viewport (in una certa misura, altezza minima: ~ 400px; altezza massima: ~ 700px;). Il codice che ho usato lì si basa su http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/.

www.madmediablitz.com/tv/precentdemo_alt.html

Questo è quello che non voglio che accada. Se ridimensioni la tua finestra, vedrai che non si ridimensiona proporzionalmente.

Ho provato entrambi per circa 2 giorni e non sono riuscito a farlo funzionare. Sto letteralmente pregando per avere aiuto, perché penso che non sia troppo complicato.

+0

Inoltre, ignorare il fatto che la tv non si allinea al 100%, questo è il mio errore di slicing. –

+3

I collegamenti demo appaiono morti. –

risposta

12
html, body { 
    height: 100%; 
} 

Leggi articolo this.

+0

Si prega di aggiungere alcune spiegazioni sul perché questo codice aiuti l'OP, nella risposta stessa, non su un sito di terze parti. Questo aiuterà a fornire una risposta da cui i futuri spettatori potranno imparare. Vedi [risposta] per maggiori informazioni. –

10

È possibile utilizzare il posizionamento assoluto in un modo abbastanza sorprendente suppongo:

div#element { 
    position: relative; 
} 

img.vertical { 
    position: absolute; 
    top: 0; // no need for px or em 
    bottom: 0; 
} 

Un browser compatibile dovrebbe cercare di rispettare sia la parte superiore e inferiore delle direttive, in realtà la gestione di una piena altezza.

30

Si prega di vedere questo: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

<div id="welcome"> 
    your content on screen 1 
</div> 

<div id="projects"> 
    your content on screen 2 
</div> 
div#welcome { 
    height: 100vh; 
    background: black; 
} 

div#projects { 
    height: 100vh; 
    background: yellow; 
} 

Questo è tutto.

+4

Se qualcuno sta leggendo questo, questa dovrebbe essere la risposta accettata. – stackular

+0

vh funziona alla grande !! Grazie. –

+2

Attenzione, questo non funzionerà con Andorid 4.3 o inferiore, Opera mini, IE8 o inferiore, ed è bacato in iOS 7.1 o versioni precedenti. Vedi: http://caniuse.com/#feat=viewport-units –