✔ DIV genau so groß, wie Bildschirm

Status
Nicht offen für weitere Antworten.
mille

mille

Erfahrenes Mitglied
Hallo.

Ich möchte einen DIV container (nennen wir ihn mal "opfer" - weil Opfer dieser Frage) genau so groß machen, wie es die nutzbare Fläche des Browser gebietet.
Sprich 100% - is ja logisch.
Nun aber mein Problem. Ich habe folgendes vereinfachtes Konstrukt
HTML: 
<div id="kompletteSeite">
    <div id="banner"><img ....></div>
    <div id="opfer"> ..... </div>
</div>

hinzu nehmen wir folgendes einfaches CSS
CSS: 
#kompletteseite{ 
    width: 500px;
    height: 100%;
}

#banner{
    width: 500px;
    height: 80px; // WICHTIG!!
}

#opfer{
    /* hier kommts?! */
    height: 100%;
    border: 1px red solid; /* Nur um den DIV sichtbar zu machen - Testzweck */
    vertical-Align: bottom; 
}

So nun mein Problem.
Im Firefox wird mir "opfer" nur so groß gemacht, wie es der Inhalt zulässt (bei 100px inhalt ist "opfer" nur 100px hoch....).
Im IE ist "opfer" genau so groß, wie es die nutzbare Fläche hergibt... Problem: ragt also 80px über die nutzbare fläche hinaus, da der Banner zu den 100% hinzukommt und die 100% angabe sich ausschließlich ein Alias für die nutzbare Fläche zu sein scheint).

Warum das ganze?

Ich habe einen Container wie "kompletteSeite" im Beispiel. Der soll genau die gesamte nutzbare Fläche im Browser einnehmen (also Auflösung minus Windowstaskleiste minus Browser Kopf mit "datei, Berarbeiten usw ...") UND (jetzt kommst!) am unteren Bildschirm Rand etwas anzeigen (einen Footer der wirklcih am unteren Ende des Browser abschließt OHNE das man scrollen muss).

Wie mache ich das?

Grüße
 
Hi,

wie wäre es hiermit?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 100%;
}

div#kompletteseite {
position: relative;
margin: 0 auto;
width: 500px;
min-height: 100%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 100%; /* IE */
background: #e9e9e9;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

div#banner {
height: 80px;
background: #cacaca;
}

div#footer {
position: absolute;
bottom: 0;
left: 0;
width:100%;
background: #cacaca;
}
-->
</style>

</head>
<body>

<div id="kompletteseite">
     <div id="banner">banner</div>

     <div id="footer">footer</div>
</div>

</body>
</html>
 
Danke Michael soweit ersteinmal.

Ich habe gerade drüber nachgedacht und da ist mir aufgefallen, dass ich mein problem zu sehr vereinfacht habe.
Deine Lösung funktioniert prima und geht in sämtlichen browsern die ich eben mal getestet habe.
Allerdings wäre es für mich äußerst wichtig den bereich zwischen "Banner" und "footeR" mit einem weiteren DIV zu belegen (Der genau so grß ist, wie die hellgraue Fläche im Beispiel) der sich scrollen lässt (overflow: auto) wenn der Inhalt in diesem DIV größer ist, als die nutzbare Fläche es erlaubt.

Da muss ich ja auch eine zwangsläufig eine höhenangabe machen für das inhalts DIV, damit die overflow Eigenschaft Sinn macht oder irre ich mich?
 
Danke. Ich werde mir die Seiten mal anschauen, bzw habe es schon getan.
Das ist die Lösung für mein Problem.

Jetzt muss ich den Code nur noch geeignet adaptieren :D.

Danke
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück