✔ 3 Zeiliges DIV-Design über 100% des Bildschirms

O

owned139

Mitglied
Hallo liebe Community,
ich habe mal wieder ein Problem. Wie bekommt man bei einem 3 zeiligen Design die mittleren DIV`s so groß, das sich das Design auf 100% des sichbaren Bereichs erstreckt?

HTML:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Unbenanntes Dokument</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="header"></div>
        <div id="navigation"></div>
        <div id="content"></div>
        <div class="clear"></div>
        <div id="footer"></div>
    </body>
</html>

CSS:
Code: 
html,body{
	padding:0;
	margin:0;
	border:none;
	width:100%;
	height:100%;
}
#header{
	width:100%;
	height:100px;
	background:#4e4e4e url(img/black_border.gif) bottom repeat-x;
}
#navigation{
	float:left;
	width:240px;
	height:400px;
	background:#646464 url(img/menu_spacer.jpg) right repeat-y;
}
#content{
	margin:0 0 0 240px;
	height:400px;
	background:#393939;
}
#footer{
	width:100%;
	height:40px;
	background:#4e4e4e url(img/black_border.gif) repeat-x;
}
.clear{
	clear:both;
}

navigation und content sollen eine variable Höhe haben.
 
Indem ein weiteres DIV deine existierenden DIVs ein-/umschließt, das zum einen mit einer Mindesthöhe von 100% ausgestattet wird, und zum anderen als Hintergrund den von #navigation übernimmt, da dieser eine absolute Breite besitzt (Hintergrundfarbe und -bild werden in einer Grafik vereint).

Den breitenvariablen Hintergrund für den Inhalt wiederum besorgt dann stattdessen das <body>-Element.

Auf diese Weise gleichen sich auch die Spaltenhöhen automatisch an, was mit deinem CSS ebenso nicht der Fall wäre.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Unbenanntes Dokument</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="wrap">
            <div id="header"></div>
            <div id="navigation"></div>
            <div id="content"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>
CSS: 
body {
   background:#393939;
}
#wrap {
   background:url(naviBg.jpg) repeat-y;
   min-height:100%;
   height:auto !important;
   height:100%;
}
#navigation{
    float:left;
    width:240px;
}
#content{
    margin:0 0 0 240px;
}


Wozu dient hier überhaupt diese unnötige "DIV-Suppe" im HTML-Code?
HTML: 
<div class="clear"></div>
<div id="footer"></div>
CSS: 
#footer{
    width:100%;
    height:40px;
    background:#4e4e4e url(img/black_border.gif) repeat-x;
}
.clear{
    clear:both;
}

Wo hier doch die verkürzte Fassung mit dem alleinigen DIV #footer möglich ist.

Sei es so:
HTML: 
<div id="footer" class="clear"></div>
Oder so:
CSS: 
#footer{
    width:100%;
    height:40px;
    background:#4e4e4e url(img/black_border.gif) repeat-x;
    clear:both;
}
 
Zuletzt bearbeitet:
Danke :)
Ich mach fürs "clearen" immer ein extra DIV, ist übersichtlicher wie ich finde
aber wieso extra ein DIV drum herum? Hätte man das nicht unter html, head{} defninieren können?

Edit:
Funktioniert im FF leider garnicht.
 
Zuletzt bearbeitet:
owned139 hat gesagt.:
Ich mach fürs "clearen" immer ein extra DIV, ist übersichtlicher wie ich finde
Zum Vergrößern anklicken....
Ah ja, und was ist bitte in deinen Augen an meinen aufgezeigten Möglichkeiten unübersichtlich? :suspekt:

Wenn du den HTML-Code unnötig (mit inhaltsleeren DIVs) aufblähen willst, was bei einem umfangreicheren / komplexeren Quellcode noch stärker zum Tragen kommt, wünsch' ich dir mal einen guten Appetit mit deiner DIV-Suppe :rolleyes:

owned139 hat gesagt.:
aber wieso extra ein DIV drum herum? Hätte man das nicht unter html, head{} defninieren können?
Zum Vergrößern anklicken....
Nö, solange die Spaltenhöhen variabel sein sollen.

owned139 hat gesagt.:
Edit:
Funktioniert im FF leider garnicht.
Zum Vergrößern anklicken....
Doch, doch. Hier fehlt blos noch das Sahnehäubchen, damit der Footer am unteren Fensterrand positioniert wird.

CSS: 
#wrap {
   background:url(naviBg.jpg) repeat-y;
   min-height:100%;
   height:auto !important;
   height:100%;
   position:relative;
}

#footer{
    width:100%;
    height:40px;
    background:#4e4e4e url(img/black_border.gif) repeat-x;
    clear:both;
    position:absolute;
    bottom:0;
}
Sowie
CSS: 
#navigation{
    float:left;
    width:240px;
    padding-bottom:40px;
}
#content{
    margin:0 0 0 240px;
    padding-bottom:40px;
}
...damit deren Inhalt nicht den Footer unterwandert.
 
Zuletzt bearbeitet:
Es funktioniert weiterhin nicht, obwohl ich deinen Code 1zu1 übernommen habe!
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Unbenanntes Dokument</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="wrap">
            <div id="header"></div>
            <div id="navigation"></div>
            <div id="content"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>
Code: 
body {
   background:#393939;
}
#header{
    width:100%;
    height:100px;
    background:#4e4e4e url(img/black_border.gif) bottom repeat-x;
}
#wrap {
   background:url(naviBg.jpg) repeat-y;
   min-height:100%;
   height:auto !important;
   height:100%;
   position:relative;
}
#footer{
    width:100%;
    height:40px;
    background:#4e4e4e url(img/black_border.gif) repeat-x;
    clear:both;
    position:absolute;
    bottom:0;
}
#navigation{
    float:left;
    width:240px;
    padding-bottom:40px;
}
#content{
    margin:0 0 0 240px;
    padding-bottom:40px;
}
So sieht es aus: http://img826.imageshack.us/img826/7919/unbenanntcxv.jpg
und so sollte es aussehen: http://img185.imageshack.us/img185/6483/unbenann2t.jpg (sind fixe Werte, Problem besteht also weiterhin)
 
Meine bislang gezeigten CSS-Codes sind selbstverständlich im eingangs gezeigten CSS-Code einzuarbeiten. Und damit funktioniert es einwandfrei.
 
Ok es funktioniert jetzt, allerdings sind die DIV`s #navigation und #content nur so hoch/groß wie der Inhalt und erstrecken sich nicht über die freie fläche zwischen header und footer.
 
Zuletzt bearbeitet:
Kann ich nicht bestätigen, was deren Hintergründe betrifft, denn die erstrecken sich innerhalb von <body> und <div id="wrap"> über die komplette Höhe im Viewport. Mehr ist da auch nicht möglich, wenn es sich hierbei um Blöcke mit variablen Höhen handeln soll, als mit ihnen (den Hintergründen) beim Betrachter diesen optischen Eindruck zu erwecken.
 
Zuletzt bearbeitet:
Hab dir noch mal nen Bild hochgeladen: http://img708.imageshack.us/img708/9799/unbenannttex.jpg

CSS:
Code: 
html,body {
	height:100%;
	margin:0;
	background:#393939;
}
#header{
    width:100%;
    height:100px;
    background:#4e4e4e url(img/black_border.gif) bottom repeat-x;
}
#wrap {
	background:url(img/menu_spacer.jpg) repeat-y;
	min-height:100%;
	height:auto !important;
	height:100%;
	position:relative;
}
#navigation{
    float:left;
    width:240px;
    padding-bottom:40px;
	background:#646464 url(img/menu_spacer.jpg) right repeat-y;
}
#content{
    margin:0 0 0 240px;
    padding-bottom:40px;
}
#footer{
	width:100%;
	height:40px;
	background:#4e4e4e url(img/black_border.gif) repeat-x;
	clear:both;
	position:absolute;
	bottom:0;
}

Hab ich i.was übersehen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück