DIV so groß wie Browser-Fenster ohne Javascript

Ich würde gerne ein DIV so groß wie das Browserfenster erstellen und dann zeigen Sie die Website mit vertikalen Blättern. Die Wirkung ich suche ist ähnlich den in THIS PAGE (man beachte die großen Banner, das immer so groß wie das Browser-Fenster ist, und der Inhalt an der Unterseite):DIV so groß wie Browser-Fenster ohne Javascript

Mit diesem HTML im Sinne:

<div class="banner"> 
    This banner is always big like the browser window 
</div> 

<div class="content"> 
    Content of the website 
</div>

Dies ist eine Möglichkeit, es zu tun:

.banner { 
position: absolute; 
top: 0px; 
right: 0px; 
bottom: 0px; 
left: 0px; 
background-color: red; 
} 

.content { 
width: 100%; 
position: relative; 
background-color: green; 
}

Problem ist, wenn ich absolute Position verwenden hierfür den Inhalt meiner Website Start von der Spitze der Seite DIV und wird von der Fahne versteckt.

Gibt es eine Möglichkeit, dies ohne JavaScript zu implementieren?

Vielen Dank im Voraus

Quelle

2014-02-27 user3360873

Warum gibt es einen 'unten: 0px' auf der' .banner '? Du willst nicht, dass es bis ganz nach unten geht, oder? Wie hoch ist das Banner? Wenn das Banner 50px hoch ist, können Sie einfach 'margin-top: 50px;' zu Ihrem '.content' hinzufügen. – Flux

@ user3360873 hat meine Antwort Ihre Anforderungen erfüllt? Wenn Ihr Problem behoben ist, kreuzen Sie bitte an :) –

Lösung: FIDDLE

CSS:

html,body { 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.banner { 
    height:100%; 
    background-color: red; 
} 
.content { 
    background-color: green; 
}

Erläuterung:

Der Punkt ist, um eine Basis zu erhalten, die die gesamte Fenstergröße passt . Sie können diese Basis erhalten, indem Sie <body> und Tags auf 100% Höhe setzen (sie erweitern standardmäßig die Gesamtbreite). Sie erweitern dann auf 100% Höhe des übergeordneten Fensters.

So brauchen Sie keine absolute Position mehr, um Elemente wie die wowow zu bestimmen.

Sie können 100% Höhe auf der ersten Ebene Kinder (in Ihrem Fall .banner) verwenden, um sie an die gesamte Fensterhöhe anzupassen. Sie müssen für die meisten Elemente keine Breite von 100% einstellen, da diese automatisch die gesamte Breite erweitern (Blockelemente wie div s, die nicht schweben und in relativer oder statischer Position sind).

Ihre Seite wird die Standard-Positionierung und Ihre .content div halten wird nur unter der Fenstergröße .banner

Quelle

2014-02-27 14:44:53

dies starten Versuchen:

<style> 
.banner { 

background-color: red; 
margin: 0px 0px 0px 0px; 
padding: 0px; 
} 

.content { 
width: 100%; 
margin: 10px 0px 0px 0px; 
padding: 0px; 
background-color: green; 
height: 100%; 

} 
</style>

Quelle

2014-02-27 14:50:57 Aditi

DIV so groß wie Browser-Fenster ohne Javascript

Antwort

Verwandte Themen