CSS Layout mit Header und DIV-Box genau so groß wie der Rest vom Browser

ismon · 1. August 2013

Hallo zusammen,

Ich beschäftige mich gerade mit der Gestellung einer Webseite mit HTML/CSS.
Die Seite sollte grundsätzlich folgenden Aufbau haben:

Ganz oben soll es eine Kopfzeile geben (höhe 50px und Breite 100%).
Darunter soll es eine Menüzeile geben (höhe 30px und Breite 100%).
Darunter soll es eine große DIV Box für den Inhalt geben. Diese sollte genau so groß sein wie der Rest des zu verfügung stehenden Platzes im Browser.
(Ohne das gescrollt wird).

Und genau bei dieser letzte DIV Box liegt mein Problem.

Die große DIV Box (im Code #Wrapper) wird immer genau 80px in der höhe größer (die 80px sind genau der Platz den Header+Menü einnehmen)) als der Bildschrim.
Wie kann ich es anstellen, dass #wrapper immer genau so groß wird wie der Rest des Platzes auf dem Bildschirm?

Folgende habe ich bis jetzt umgesetzt:
CSS:

Code:

*{
	margin: 0;
	padding: 0;
}

html, body {
 
	color: #aaa; 
	font-family: sans-serif;
	font-size: 100%;
	height: 100%;	
}

#head{
	position: relative;
	top: 0px;
	width: 100%;
	height: 50px;
	color: white;
	background-color: #5c5c5c;	

}

#menue{
	position: relative;
	top: 0px;
	width: 100%;
	height: 30px;
	color: white;
	background-color: #a3a3a3;	
}

#wrapper{
	position: relative;
	border: 5px solid #e1e36c;
	height: 100%;
	width: 100%;			
}

HTML:

<body>


<div id="head">
	
</div><!--Ende Head-->


<div id="menue">
	
</div><!--Ende menue-->


<div id="wrapper">
	
</div><!--Ende Wrapper-->



</body>

Es wäre super wenn mir jemand einen Tip geben könnte.

Gruß,
Simon

Bisumaruku · 1. August 2013

Das Verhalten ist normal!

Keine Ahnung ob es anders geht, aber so spontan würde ich das wie folgt lösen.
Den Header und das Menü per z-index auf eine höhere Ebene legen damit die "wrapper" box den ganzen browser einnehmen kann. damit überlagern menü und header den wrapper. dann nen padding-top von 80px oder mehr bei der "wrapper" box rein machen.

echoDave · 1. August 2013

HTML:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Geht auch aber eine suboptimale Lösung.

Mittels Jquery würde es auch noch gehen.

Daaron · 1. August 2013

Was klappen könnte...

Code:

#wrapper {
position:fixed;
top: 80px;
bottom:0;
left:0;
right:0;
}

Morpheus3k · 1. August 2013

Also ich finde gerade die 'calc' CSS Funktion als sehr elegant. Die ganzen 'position: relative' Eigenschaften sind unnötig.
Calc erfordert halbwegs aktuelle Browser: Can I use... Calc().
Infos zu Calc: MDN: Calc

HTML:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            color: #aaa;
            font-family: sans-serif;
            font-size: 100%;
            height: 100%;
        }

        #head {
            height: 50px;
            color: white;
            background-color: #5c5c5c;
        }

        #menue {
            height: 30px;
            color: white;
            background-color: #a3a3a3;
        }

        #wrapper {
            border: 5px solid #e1e36c;
            height: 90%;                 /* fallback for browsers without support for calc() */
            height: -webkit-calc(100% - 80px);
            height: calc(100% - 90px);  /* 100% - head(50px) - menu(30px) - border(2x 5px) */
            width: 95%;                 /* fallback for browsers without support for calc() */
            width: -webkit-calc(100% - 10px);
            width: calc(100% - 10px);
        }
        </style>
    </head>

    <body>
        <div id="head">
        </div><!--Ende Head-->

        <div id="menue">
        </div><!--Ende menue-->

        <div id="wrapper">
        </div><!--Ende Wrapper-->
    </body>
</html>

ismon · 1. August 2013

Erstmal danke für die vielen schnellen Antworten.
Der Weg mit der Calc Funktion sieht interessant aus. Zumal es kein Problem wäre, dass es nur in aktuelle Browsern funktioniert.

Ich habe es gerade getestet allerdings funktioniert es leider noch nicht.

Hier die Testseite:
http://feedon.me/test/index2.html

Die wrapper Box hat eine höhe von 0.

Daaron · 1. August 2013

klassisches Problem...
Gib html auch ne Höhe von 100%.

ismon · 1. August 2013

Ups, das wars. Bin halt noch am lernen. :-)
Vielen Dank.

Morpheus3k · 1. August 2013

Stimmt, hatte ich übersehen.

Allerdings solltest du unbedingt deinen HTML Code formatieren. Gerade wenn man erst am Lernen ist, sollte man auf schönen Code achten.

Daaron · 1. August 2013

...und lerns gleich richtig: Wenn du schon einen HTML5-Doctype verwendest, dann mach Nägel mit Köpfen. Ein Menü gehört sich z.B. nicht in ein Div sondern ein <nav>.

Suche

CSS Layout mit Header und DIV-Box genau so groß wie der Rest vom Browser

ismon

Lieutenant

Bisumaruku

Lt. Commander

echoDave

Commander

Daaron

Fleet Admiral

Morpheus3k

Ensign

ismon

Lieutenant

Daaron

Fleet Admiral

ismon

Lieutenant

Morpheus3k

Ensign

Daaron

Fleet Admiral