Vollbild div, passt der browser die Größe

Ich habe ein html-Dokument mit div und css wie dieses:

<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ü ist fixiert, behindMenu ist die gleiche Größe wie Menü, und es ist hinter-Menü. Dann habe ich logo und div mit der Klasse voll. Nach der vollständigen div mit der Klasse content.

Wenn Sie diese Seite besuchen, ich will, dass div voller werden (Größe) zwischen logo und unten od die browser-Größe. Also die full muss eine Höhe zwischen logo und unten in der browser-Größe, auch wenn ich Fenster vergrößern. Wenn scroll nach unten, dann die Benutzer sehen, den rest Der Inhalte.

Etwas wie dieses: http://strobedigital.com/

Hier ist fiddle: http://jsfiddle.net/2963C/

InformationsquelleAutor repincln | 2013-08-07

css html

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%;}

Danke. Dies funktioniert gut, mit einer änderung. Menü, behindMenu und logo werden unter voller div. Ich danke Ihnen sehr.
Es funktioniert nicht, wenn der Inhalt unter .voll ist höher als .full Sie haben die Verwendung von position: fixed;

InformationsquelleAutor Anon

33

Gibt es eine einfache Lösung unterstützt alle modernen Browser.
```
div#full {
    height: 100vh;
}
```
Die einzige Bemerkenswerte Ausnahme ist die unter Android 4.3 - aber nur in dem system-browser (Chrome funktioniert ok).

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

Wow!!! Besser als die akzeptierte Antwort! Einfach, aber die Arbeit macht! Danke!!!
Genial, habe es gerade ausprobiert
100vh funktioniert nicht auf Android 4.3 und unten aufgrund der alten webview-Implementierung
vh und vw sind problematisch mit dem iPhone als auch.

InformationsquelleAutor Tomek Kobyliński
2
```
 .full { min-height: 100%; height:auto;}
```
Dies funktioniert nicht ...

InformationsquelleAutor ParVathi

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

Hier ist die Geige, die mit der Lösung-
http://jsfiddle.net/agrawal_rupesh/b7gwK/

Diese Lösung ist nicht gut, da der Inhalt nicht nach der vollständigen div. Es ist hinter, div.

InformationsquelleAutor Rupesh

Leider vh und vw ist sehr buggy mit iPhone, aber fast alle Browser (Weg zurück) ist glücklich dabei einige Mathematik für Sie:

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;
}

InformationsquelleAutor CelticParser

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.