DIV-Box Höhe 100% @ tutorials.de: Tutorials, Forum & Hilfe

_SimonSez_ · 02.02.10 22:47

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-Code:

<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

Maik · 02.02.10 22:53

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:

Code 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

_SimonSez_ · 03.02.10 11:29

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

Maik · 03.02.10 11:31

Hi,

tausch mal die margin-Eigenschaft gegen padding aus.

mfg Maik

_SimonSez_ · 03.02.10 15:54

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

Elite · 05.02.10 19:12

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.

Maik · 05.02.10 19:50

Hi,

Zitat von Elite

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.

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/attach...100-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

_SimonSez_ · 10.02.10 22:26

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

Maik · 11.02.10 04:55

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:

Zitat von Maik

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;
[b]font-size: 0;[/b]
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

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

_SimonSez_ · 11.02.10 11:07

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

Maik · 11.02.10 13:12

Hi,

vergleich mal deine drei Regeln zur Einrichtung einer Mindesthöhe für #body:

Code css:

1	min-height:100%; height:auto; height:100%;

mit meinen:

Code css:

#body {
...
min-height:100%;
height:auto !important;
height:100%;
...
}

Bei dir fehlt die !important-Regel, mit der die standardkonformen Browser angewiesen werden, die nachfolgende height:100%-Deklaration zu ignorieren, die dem IE6 gewidmet ist, der min-height nicht interpretiert, dafür aber die height-Eigenschaft als "Mindesthöhe" betrachtet.

mfg Maik

_SimonSez_ · 11.02.10 14:02

An dem "!important" hats nicht gelegen. Der Bereich in dem der Hintergrund nicht eingeblendet wird, ist immer das Stück, was gescrollt wird.

CSS:

Code :

#body           { width:803px; margin:0 auto; min-height:100%; height:auto !important; height:100%; background:url(../images/bg02.jpg) repeat-y; }
#head           { width:803px; height:251px; padding:10px 0px 0px 0px; background:#727783; }
#navi           { width:801px; height:32px; margin:0px 1px 0px 1px; background:url(../images/bg03.jpg) 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; }

Das hier wär der body-Tag:

HTML-Code:

<body>
  <div id="body">
  <div id="head"><img src="images/head.jpg" alt="" width="803" height="251" /></div>
  <div id="navi">
    <table class="menue" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href="index.php?page=001">Punkt 1</a></td>
        <td><a href="index.php?page=002">Punkt 2</a></td>
        <td><a href="index.php?page=003">Punkt 3</a></td>
        <td><a href="index.php?page=004">Punkt 4</a></td>
        <td><a href="index.php?page=005">Punkt 5</a></td>
        <td><a href="index.php?page=006">Punkt 6</a></td>
      </tr>
    </table>
  </div>
  <div id="content">{content}</div>
  </div>
</body>

In der Content-DIV wird "{content}" durch den Inhalt einer einzelnen html-Seite per PHP-Script ersetzt.

einzelne HTML-Seiten:

HTML-Code:

<div id="leftcolumn">
  <h1>Text</h1>
  <p>Text.</p>
</div>
<div id="rightcolumn">
  <h1>Text:</h1>
  <h2>Text</h2>
  <ul>
    <li>Punkt a</li>
    <li>Punkt b</li>
    <li>Punkt c</li>
  </ul>
</div>

Gruß
Simon

Maik · 11.02.10 14:08

Dann hast du mein Tutorial, das ein dreispaltiges (floatendes) Layout beinhaltet, nicht richtig studiert, bzw. den Code nicht vollständig übernommen, und so tritt bei dir nun dieser Problemfall auf:

Webmaster FAQ -> [CSS] Warum passt sich die Boxenhöhe nicht dem Inhalt an?

mfg Maik

_SimonSez_ · 11.02.10 14:22

Ah jetzt hab ich es studiert und verstanden

. Super und Danke.

Hätte da noch eine Frage, vielleicht kann man das hier direkt mitbeantworten.
Und zwar hab ich mein Menü auch mit CSS gemacht.

Code:

Code :

.menue          { border:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:center; }
 
.menue a:link, .menue a:visited
                { text-decoration:none; display:block; width:100px; color:#ffffff; background:url(../images/button.jpg) repeat-x; line-height:32px; 
                  text-align:center; border-right:1px solid #ffffff; }
            
.menue a:hover, .menue a:active, .menue a:focus
                { text-decoration:none; color:#ffffff; background:url(../images/button-hover.jpg) repeat-x; }

Funktioniert auch alles super bis auf eine Sache.
Geh ich mit der Maus drüber wechselt die Farbe. Klick ich auf den Punkt und der Inhalt wird mir angezeigt ist die Farbe aber wieder normal und nicht wie bei "hover"

Gruß
Simon

Maik · 11.02.10 14:25

Die :active-Pseudoklasse besitzt ihre Gültigkeit auch nur bei gedrückter Maustaste.

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Höhe von DIV an Höhe des Nebenanliegenden anpassen

div in div mit 100% höhe

Höhe im IE

Höhe des Menüs an Höhe des Contents anpassen

Minimale Höhe, maximale Höhe?

E-Mail:

Abonnieren Abbestellen