✔ DIV-Box Höhe 100%

S

_SimonSez_

Mitglied
Hallo zusammen,

bin neu hier und habe das Problem, dass ich eine DIV-Box nicht über die komplette Höhe bekomme.
Ich habe einen Container in dem sich drei weitere DIV-Boxen untereinander befinden (head, menu, content).

Die DIV-Box "content" soll immer bis zum Ende des Browserfensters gehen (egal welche Darstellungsgröße)

CSS:
Code: 
*		 { padding:0px; margin:0px; }

body	 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-image:url(....jpg); background-repeat:repeat-x; }
	 
#body	 { margin: 0 auto; width: 737px; }
#head 	 { width: 737px; height: 205px; margin: 10px 0px 0px 0px; }
#navi 	 { width: 737px; height: 33px; }
#content { width: 737px; background-image:url(....jpg); background-repeat:repeat-y; }

HTML:
HTML: 
<body>
    <div id="body">
      <div id="head">
        Bild
      </div>
      <div id="navi">
        menu
      </div>
      <div id="content">
        Content	   
      </div>
  </div>
</body>

Bin kein CSS-Experte. Würde mich über hilfreiche Kommentare freuen.

Gruß
Simon
 
Hi,

mein CSS-Tutorial CSS-Layout mit 100%-Höhe hilft dir hier weiter :)

Demnach wird der angedachte Hintergrund für #content stattdessen für den DIV-Block #body verwendet, der im Viewport eine Mindesthöhe von 100% erhält, und sich somit vom oberen bis zum unteren Fensterrand erstreckt.

Die beiden Blöcke #head und #navi werden dann mit einem Hintergrund versehen, der das Hintergrundbild in diesen Bereichen verdeckt.

Das ergänzte und geänderte Stylesheet lautet in diesen Passagen dann so:
CSS: 
html,body {
height:100%;
}

#body { 
margin: 0 auto; 
width: 737px; 
min-height:100%;
height:auto !important;
height:100%;
background:url(....jpg) repeat-y;
}

#content { 
width: 737px; 
}

mfg Maik
 
Hi Maik,

danke für deine schnelle Antwort. Hat perfekt funktioniert :)

In der DIV-Box "head" hab ich oben margin:10px, die jetzt einen Scrollbalken verursachen.
Hast du eine Idee, wie ich das Problem löse?

Gruß
Simon
 
Hi,

funktioniert :) Musste noch den Hintergrund einfärben, da man sonst das background-image aus dem body gesehen hätte.
Danke für deine Hilfe.

Gruß
Simon
 
Ich möchte kein neues Thema für meine Frage eröffnen, deshalb nehme ich mal dieses:

Ich habe auch nach maiks 100%-Höhe Tutorial mein Layout erstellt. Das mit dem Strecken bis zum Browserrand funktioniert auch tadellos. Ich hätte es jedoch gerne, dass im Content-Bereich auch Div`s mit height=100% möglich sind. Wenn ich das richtig sehe funktioniert dies aber nicht, da der wrapper mit height: auto !important; in modernen Browsern nicht auf 100% steht und sämtlicher Inhalt ein Kind-Element vom wrapper ist.
Hat jemand eine Lösung, wie ich auch im Content div`s mit 100%-Höhe machen könnte? Wenn ich den wrapper auf height: 100% stelle dann geht mein Content über den Footer hinaus wenn der Content größer ist als das Fenster.
 
Hi,
Elite hat gesagt.:
Ich möchte kein neues Thema für meine Frage eröffnen, deshalb nehme ich mal dieses:

Ich habe auch nach maiks 100%-Höhe Tutorial mein Layout erstellt. Das mit dem Strecken bis zum Browserrand funktioniert auch tadellos. Ich hätte es jedoch gerne, dass im Content-Bereich auch Div`s mit height=100% möglich sind. Wenn ich das richtig sehe funktioniert dies aber nicht, da der wrapper mit height: auto !important; in modernen Browsern nicht auf 100% steht und sämtlicher Inhalt ein Kind-Element vom wrapper ist.
Hat jemand eine Lösung, wie ich auch im Content div`s mit 100%-Höhe machen könnte? Wenn ich den wrapper auf height: 100% stelle dann geht mein Content über den Footer hinaus wenn der Content größer ist als das Fenster.
Zum Vergrößern anklicken....

du kannst es ja mal über's Wochenende auf einen Versuch ankommen lassen, und in meiner Beispielseite "3cols_header_topNavi_footer.htm" (siehe das Attachment http://www.tutorials.de/forum/attachments/css-tutorials/44505d1258280199-3cols_height100-fixed-.zip) im Content-Bereich solch ein DIV mit weiterer 100%-Höhenangabe einbetten, und anschliessend in den einzelnen Browsern nachschauen, bis wohin sie es ausstrecken.

Auf jeden und keinen Fall so, wie du dir das vorstellst.

In dem einen Browser wird der Block nur so hoch sein, wie es sein Inhalt von ihm tatsächlich abverlangt, der andere Browser wird ihn zwar in der Höhe strecken, aber zugleich um das zusammenaddierte Höhenmaß des vorangegangen Header- und TopNavi-Bereichs über den unteren Fensterrand hinaus verlängern, sodass du die Seite schon scrollen kannst, obwohl noch keine einzige Zeile Inhalt darin vorhanden ist. Der Grund hierfür ist, dass sich die 100%-Höhenfestlegung innerer Block-Elemente immer auf das Browserfenster, und nicht auf die Höhe eines umschliessendes DIVs bezieht.

Um deine Frage nach einer Lösung abschliessend klar zu beantworten: Nein, für diese Art von Seitenkonzept gibt es hier keine Lösung, die Höhe der inneren DIV-Blöcke des Content-Bereichs (nur) bis zum unteren Fensterrand zu strecken.

In einer ganz anderen technischen Seitenumsetzung hättest du die Möglichkeit, die DIV-Blöcke mit einer top- und bottom-Positionsangabe im Browserfenster "aufzuziehen". Dieses Seitenkonzept setzt aber voraus, dass nicht die vollständige Seite, sondern der Inhalt innerhalb seines umgebenden DIV-Blocks gescrollt wird.

Diese Umsetzung könnte dann beispielsweise so aussehen: http://www.cssplay.co.uk/layouts/bodyfix.html.

mfg Maik
 
Hi Maik,

im Nachhinein hab ich doch noch einen Fehler festgestellt.
Ich habe jetzt nun Text in den Content-Bereich gepackt. Wenn ich mein Firefox-Fenster jetzt normal auf einer Auflösung von 1680x1050 laufen lasse ist es kein Problem. Verkleiner ich das Fenster nun auf eine Auflösung von 1024x768 bekomme ich einen Scrollbalken (was normal ist) allerdings ist dann der Hintergrund nicht mehr bis zum Ende.

Alle anderen die mir weiterhelfen können, sind natürlich auch gefragt :)

Ich hab euch hier mal ein kleines Image angehängt.

Gruß
Simon
 

Anhänge

  • div_fehler.jpg
    div_fehler.jpg
    88 KB · Aufrufe: 128
Moin,

sollen wir jetzt raten, wo die Ursache hierfür in deinem Code liegt?

Gut, dann versuche ich jetzt mal mein Glück, und zitiere mich aus meinem Tutorial:
Maik hat gesagt.:
Nachtrag - 20.12.2008:

Nach Veröffentlichung dieses Tutorials im Sommer '07 wurde ich dieses Jahr im CSS-Forum schon einige Male darauf angesprochen, dass sich in den modernen Browsern (FF, Opera, Safari, usw.) plötzlich zwischen dem unteren Layout- und Fensterrand ein Abstand ergibt, sobald der Seiteninhalt die Höhe des Viewports (Anzeigebereich im Browserfenster) überschreitet, und die Seite nach unten gescrollt wird.

Kurz vor Ablauf der Jahresfrist find ich nach diversen Antworten im Board heute endlich Zeit, die Lösung auch hier vorzustellen :)

Code: 
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
Mit der Regelerweiterung font-size:0 wird die Schriftgröße für den dynamisch erzeugten Inhalt (content:".") auf null gesetzt, und somit die unerwünschte Lücke geschlossen.

Da in meinen Beispielseiten des ersten Attachments "3cols_height100%.zip" diese Formatierung fehlt, möchte ich Euch darauf hinweisen, sie in den Selektor .clearfix:after zu übernehmen, oder ab sofort die gefixte Version herunterzuladen - vielen Dank :)
Zum Vergrößern anklicken....

Sollte dieser Fall bei dir nicht zutreffen, möchte ich dich bitten, deinen aktuellen Quellcode, oder den Link zu deiner Seite zu posten, denn aus deinem Screenshot lässt sich der tatsächliche Grund für diesen Darstellungsfehler nicht ablesen.

mfg Maik
 
Hi Maik,

hier noch der css-Quellcode:

Code: 
#body	  { margin: 0 auto; width:803px; min-height:100%; height:auto; height:100%; background-image:url(../images/bg02.jpg); background-repeat:repeat-y; }
#head 	  { width:803px; height:251px; padding:10px 0px 0px 0px; background-color:#727783; }
#navi 	  { width:801px; height:32px; margin:0px 1px 0px 1px; background-image:url(../images/bg03.jpg); background-repeat:repeat-x; }
#content  { width:763px; padding:20px 20px 0px 20px; }

#leftcolumn  { width: 463px; float: left; padding-right: 50px; }
#rightcolumn { width: 229px; float: right; padding-left: 20px; display: inline; position: relative; border-left: 1px dashed #FFFFFF; }

left- und rightcolumn werden im nachhinein per php in den Content-Bereich geladen.

Gruß
Simon
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück