div schermo intero che si adatta alle dimensioni del browser

<html> 
<head> 
    <title></title> 
    <style text="text/javascript"> 
    body { padding:0px; margin:0px; } 
    .full { background-color: yellowgreen; width: 100%; height: 100%; } 
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; } 
    .behindMenu { height: 50px; width: 100%; } 
    .logo {width: 100%; height: 150px;} 
    .content {background-color: yellow;} 
    </style> 
</head> 
<body> 
<div class="menu">Menu</div> 
<div class="behindMenu"></div> 
<div class="logo">Logo</div> 
<div class="full">Full div</div> 
<div class="content">The rest content</div> 
</body> 
</html>

menù è fisso, behindMenu è la stessa dimensione di menu ed è dietro a menu. Poi ho il logo e div con la classe piena. Dopo il pieno è div con contenuti di classe.

Quando visito quella pagina voglio che il div completo sarà (dimensioni) tra il logo e il fondo della dimensione del browser. Quindi il pieno deve avere un'altezza tra il logo e la parte inferiore della dimensione del browser, anche se ridimensiono la finestra. Quando scorri verso il basso, l'utente vedrà il resto del contenuto.

Qualcosa di simile a questo: http://strobedigital.com/

Ecco violino: http://jsfiddle.net/2963C/

fonte

2013-08-07 repincln

HTML

<html> 
<head> 
    <title></title> 
    <style text="text/css"> 
    body { padding:0px; margin:0px; } 
    .full { background-color: yellowgreen; width: 100%; height: 100%; } 
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; } 
    .behindMenu { height: 50px; width: 100%; } 
    .logo {width: 100%; height: 150px;} 
    .content {background-color: yellow;} 
    </style> 
</head> 
<body> 
<div class="wrapper"> 
<div class="menu">Menu</div> 
<div class="behindMenu"></div> 
<div class="logo">Logo</div> 
<div class="full">Full div</div> 
<div class="content">The rest content</div> 
</div> 
</body> 
</html>

CSS

html,body{height:100%;} 
.wrapper{min-height:100%; position:relative} 
.full{position:absolute; top:0; left:0; width:100%; height:100%;}

fonte

2013-08-07 07:33:34 Anon

Grazie. Funziona bene con una modifica. menu, behindMenu e logo devono essere al massimo div. Grazie mille. – repincln

Non funziona se il contenuto sotto .full è superiore a .full Devi usare la posizione: fisso; – Macbric

.full { min-height: 100%; height:auto;}

fonte

2013-08-07 06:52:16 ParVathi

Questo non funziona ... – repincln

<html> 
<head> 
    <style text="text/javascript"> 
    html,body{height:100%;} 
.wrapper{min-height:100%; position:relative} 
.full{position:absolute; left:0; width:100%; min-height:100%;} 
.menu { height: 50px; width: 100%; background-color: black; position: fixed; } 
.behindMenu { height: 50px; width: 100%; } 
.logo {width: 100%; height: 150px;} 
.content {background-color: yellow;} 
    </style> 
</head> 
<body> 
<div class="wrapper"> 
<div class="menu">Menu</div> 
<div class="behindMenu"></div> 
<div class="logo">Logo</div> 
<div class="full">Full div</div> 
</div> 
    <div class="content">The rest content</div> 
</body> 
</html>

Ecco violino con soluzione- http://jsfiddle.net/agrawal_rupesh/b7gwK/

fonte

2013-08-07 08:08:48 Rupesh

Questa soluzione non è buona, perché il contenuto non è dopo il div completo. È dietro quel div. – repincln

C'è una soluzione semplice supportata da tutti i browser moderni.

div#full { 
    height: 100vh; 
}

L'unica eccezione degna di nota è l'Android di sotto 4.3 - ma solo nel browser di sistema (Chrome funziona bene).

grafico supporto

Browser: http://caniuse.com/viewport-units

fonte

2014-05-22 11:09:53

Wow! Meglio della risposta accettata! Semplice ma facendo il lavoro! Grazie! –

Impressionante, l'ho appena provato –

** 100vh ** non funziona su Android 4.3 e versioni precedenti a causa della vecchia implementazione webview – EpicPandaForce

Purtroppo vh e vw è molto buggy con iPhone, ma quasi tutti i browser (che vanno via del ritorno) è felice di fare un po 'di matematica per voi:

html,body { 
    height:100%; 
    margin:0; 
} 

.full { 
    height: calc(100% - 50px); /* Minus menu height */ 
    min-height: calc(100% - 50px);/*for Mozilla */ 
} 

html>body .full { 
    height:auto; 
}

fonte

div schermo intero che si adatta alle dimensioni del browser

risposta

Problemi correlati