Layout mit fester Höhe und variable Höhe

BJ1995 · 23.10.2011, 09:33

Ich habe ein Header mit 100px height und darunter soll ein div, der den Rest des Platzes ausfüllt.
Ich habe das so versucht:

PHP-Code:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <style>
        body,html{
            height: 100%;
        }
        #header{
            height: 100px;
        }
        #main{
            height: 100%;
            background-color: grey;
        }
    </style>

</head>

<body>
    <div id="header"><h1>Header</h1></div>
    <div id="main"><p>Main</p></div>
</body>
</html>

Aber dann ist der untere Bereich(#main) zu groß. Er ist so groß wie der Anzeigebereich des Browssers. Also wenn der Browser 800px hoch ist, ist der untere Bereich auch 800px hoch. Aber der Bereich sollte eigentlich 800px-100px hoch sein.

DirkHo · 23.10.2011, 17:53

Hallo,

das ist ganz einfach deshalb so, weil sich 100% auf die Höhe des Browserfensters bezieht.

Das geht wohl nur, in dem du einen Container um #main und den Banner machst und diesem Container die min-height: 100% und als Hintergrundbild den Hintergrund von #main.

Viele Grüße,

Dirk

F234k · 31.10.2011, 14:02

PHP-Code:

          #header{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100px;
        }
        #main{
            position: absolute;
            top: 100px;
            left: 0px;
            bottom: 0px;
            width: 100%;
            background-color: grey;
        }

Die Kombination aus top und bottom ohne height-Angabe macht's. Geht aber nicht in den Uralt-Browsern und der richtige Doctype sollte angegeben sein.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
PHP Text wird nicht ausgegeben / Notice: undefined variable	MBaaboura	PHP Einsteiger	26	26.09.2011 11:09
[Erledigt] Variable Höhe des Richtexteditors - javascript	tux86	JavaScript, Ajax und mehr	20	09.07.2009 12:03
Problem Undefined variable:	banbanban	PHP Tipps 2009	5	04.03.2009 17:55
Undefined variable Undefined property: block	xxJJxx	PHP Tipps 2008	16	05.08.2008 15:30
Variable Höhe eines IFrames		PHP Tipps 2006	3	07.02.2006 10:06
[CSS] Relatives Layout mit fester Navigation	Benny	HTML, Usability und Barrierefreiheit	6	17.08.2005 09:26
Warum wird Variable nicht übergeben???	Anuschka	PHP Tipps 2005	2	06.01.2005 13:22

23.10.2011, 09:33
BJ1995 Benutzer Registriert seit: 30.01.2011 Beiträge: 38 PHP-Kenntnisse: Anfänger	Layout mit fester Höhe und variable Höhe Ich habe ein Header mit 100px height und darunter soll ein div, der den Rest des Platzes ausfüllt. Ich habe das so versucht: PHP-Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <style> body,html{ height: 100%; } #header{ height: 100px; } #main{ height: 100%; background-color: grey; } </style> </head> <body> <div id="header"><h1>Header</h1></div> <div id="main"><p>Main</p></div> </body> </html> Aber dann ist der untere Bereich(#main) zu groß. Er ist so groß wie der Anzeigebereich des Browssers. Also wenn der Browser 800px hoch ist, ist der untere Bereich auch 800px hoch. Aber der Bereich sollte eigentlich 800px-100px hoch sein. Geändert von BJ1995 (23.10.2011 um 09:38 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

23.10.2011, 17:53
DirkHo Erfahrener Benutzer Registriert seit: 22.07.2004 Beiträge: 226	Hallo, das ist ganz einfach deshalb so, weil sich 100% auf die Höhe des Browserfensters bezieht. Das geht wohl nur, in dem du einen Container um #main und den Banner machst und diesem Container die min-height: 100% und als Hintergrundbild den Hintergrund von #main. Viele Grüße, Dirk

31.10.2011, 14:02
F234k Benutzer Registriert seit: 18.04.2010 Beiträge: 35 PHP-Kenntnisse: Anfänger	PHP-Code: #header{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; } #main{ position: absolute; top: 100px; left: 0px; bottom: 0px; width: 100%; background-color: grey; } Die Kombination aus top und bottom ohne height-Angabe macht's. Geht aber nicht in den Uralt-Browsern und der richtige Doctype sollte angegeben sein.