Komisches DIV-Problem

[crashx]

Ich habe ein DIV welches mir die Seite "zusammen hält"
In diesem DIV gibt es wiederum andere DIV's. wenn nun das content DIV mit viel Text
gefüllt wird, und man in den scrollbaren Bereich kommt, vergrössert sich aber das #holder DIV nicht mit.

Ich habe schon oft in dieser Form etwas geschrieben aber irgendwie hat sich ein Fehler eingeschlichen den ich nicht finde.

Relevante CSS

#holder{
  margin: 0 auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  padding: 0px;
  width: 973px;
  height: 101%; 
  min-height: 101%;
  background-color: #ffffff;
}
.navigation{
  margin: 0 auto;
  border: 0px;
  padding: 0px;
  width: 300px;
  float: left;
}
.content{
  margin: 0 auto;
  border: 0px;
  padding: 0px;
  width: 645px;
  float: left;
}

Ein Bild des fehlers

Stehe im momment total auf dem Schlauch

Danke für eure Hilfe

 

[pHyro]

Versuch mal ob es funktioniert, wenn du die height-Angabe beim #holder weg lässt, und nur die min-height-Angabe verwendest.

Gruß

 

[crashx]

In diesem bereich habe ich auch schon getestet, doch einen Effekt bringt es nicht mit sich.

 

[pHyro]

Gibt es die Seite online zu betrachten, damit man den ganzen Code zur Verfügung hat?

Gruß

 

[hela]

... Stehe im momment total auf dem Schlauch ...

... dann lies dir bitte mal das hier durch: Warum passt sich die Boxenhöhe nicht dem Inhalt an?

 

[crashx]

@hela

Deine Hilfestellung brachte auch nicht den nötigen effekt, aber danke für den link.
Ich habe jetzt eine unkonventionelle Lösung gefunden um das Problem zu lösen.

  background-image: url(../images/back_content.jpg);
  background-repeat: repeat-y;
  background-position: center;

Danke für eure Hilfe.

 

[Maik]

Hi,

@hela

Deine Hilfestellung brachte auch nicht den nötigen effekt, aber danke für den link.

Der korrekte Aufruf der Klasse .clearfix im DIV #holder vorausgesetzt:

<div id="holder" class="clearfix">

und diese CSS-Regel in deinem Stylesheet angenommen, die du hier nicht gezeigt hast:

html,body { height:100%; }

findet sich die Ursache in der height-Regel für #holder, der in dieser Form zuvor height:auto !important erfolgen muß, damit sie von den standardkonformen Browsern nicht interpretiert / ausgeführt wird, da sie diese Angabe als absolute Höhe interpretieren (hier 100% des Browserfensters).

• Variante - min-height folgt nach height:

#holder{
  margin: 0 auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  padding: 0px;
  width: 973px;
  height: auto !important; /* auto-height mit !important-Regel für standardkonforme Browser, damit sie die nachfolgende height-Regel ignorieren */
  height: 100%; /* "Mindesthöhe" in IE6 */
  min-height: 100%; /* Mindesthöhe in standardkonformen Browsern */
  background-color: #ffffff;
}

• Variante - min-height wird vor den height-Deklarationen genannt:

#holder{
  margin: 0 auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  padding: 0px;
  width: 973px;
  min-height: 100%; /* Mindesthöhe in standardkonformen Browsern */
  height: auto !important; /* auto-height mit !important-Regel für standardkonforme Browser, damit sie die nachfolgende height-Regel ignorieren */
  height: 100%; /* "Mindesthöhe" in IE6 */
  background-color: #ffffff;
}

mfg Maik

 

[crashx]

Hi Maik

Danke für die Präzisierung der ausführung.