Metodo per la pagina HTML a schermo intero a schermo intero?

Sto cercando una soluzione cross-browser valido per una pagina HTML che:Metodo per la pagina HTML a schermo intero a schermo intero?

Consuma 100% dell'altezza dello schermo, senza foro troppopieno (cioè senza scrolling)
ha un senso verticale (e in orizzontale) centrato <div> che manterrà il contenuto principale

So che il centraggio verticale è possibile quando il contenitore di avvolgimento ha un'altezza statica. Regolare questa altezza all'altezza della finestra del browser è qualcosa di fattibile? (Preferibilmente, non dovrebbe essere usato JS.)

fonte

2011-01-26 Yuval Adam

Difficile senza JS come HTML/CSS non ha modo di sapere quale sia l'altezza della finestra del browser. Penso che questo sarà possibile solo con JS che rileva l'altezza della finestra del browser (e ovviamente cambia a questa altezza se un utente ridimensiona) e imposta l'altezza degli elementi statici in quel modo. –

vertcenter o deadcenter da http://reisio.com/examples/ dovrebbero coprire i bit delicati – reisio

@reisio - esempi meravigliosi! Puoi per favore postare questo come risposta in modo da poter upvote correttamente? –

Dipende da cosa intendi con "browser incrociato". A seguito funziona bene con tutti gli attuali, gli standard quelle compatibili (quindi non IE6):

HTML:

<div id="a"> 
    <div id="b"> 
     <div id="content"></div> 
    </div> 
</div>

CSS:

html, body, #a { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 

#a { 
    display: table; 
} 

#b { 
    display: table-cell; 
    margin: 0; 
    padding: 0; 

    text-align: center; 
    vertical-align: middle; 
} 

#content { 
    border: 5px solid red; 
    width: 100px; 
    height: 100px; 
    margin: auto; 
}

esempio dal vivo:

http://jsfiddle.net/mGPmr/1/

fonte

2011-01-26 14:14:21 RoToRa

Semplicemente non è possibile senza JavaScript, almeno non con CSS2 o precedente (non sono sicuro che se CSS3 rende possibile ciò, qualcuno ci chiarisce).

Le altre risposte fornite richiedono larghezza e altezza assolute per l'elemento; Non ho assunto questo requisito. Non c'è modo di centrare verticalmente un elemento che scorre, che è quello che di solito si vuole, dato che non si conosce il rapporto di aspetto della finestra del browser per utilizzare in modo affidabile contenitori di dimensioni fisse per il contenuto.

fonte

2011-01-26 08:33:23

Si potrebbe fare qualcosa di simile. Sembra funzionare anche in IE6:

<html> <head> 

<script type="text/javascript"> </script> 

<style type="text/css"> 

#container { height: 100%; width: 100%; position: relative; } 


#content { 
    border: 5px solid red; 
    width: 100px; 
    height: 100px; 
    position: relative; 
    margin-left: -50px; 
    margin-right: -50px; 
    top: 50%; 
    left: 50%; } 


</style> 


</head> <body> 

<div id="container"> 
     <div id="content"></div> </div> 

</body> </html>

fonte

2011-01-26 14:38:40 stoneMonkey77

Metodo per la pagina HTML a schermo intero a schermo intero?

risposta

Problemi correlati