✔ varibale höhe im FF funktioniert nicht

[Arndtinho]

Hallo,

ich habe per CSS ein <div>-Element mit einer festen Höhe definiert Bei Bedarf soll aber das <div> aufgespannt werden. Aber dies funktioniert nicht im FF.

#content {
   float:            right;
   min-height:       450px;
   height:           auto;
   width:            599px;
   border-left:      1px #0166FF solid;
}

/** nur für IE 5.5 - 6.x **/
/**************************/
* html #content { 
   height:           450px; 
}

Was ist daran falsch?

Viele Grüße
Arndtinho

 

[Maik]

Hi,

bei mir nimmt die Boxenhöhe im FF (2.0.0.5) zu, wenn der Inhalt die Mindesthöhe von 450px überschreitet - mit anderen Worten: der CSS-Code ist nicht falsch.

Wie lautet denn der übrige Quellcode des Dokuments? Gibt es evtl. ein Elternelement mit fester Höhenangabe?

 

[Arndtinho]

Hi,

es gibt ein Elternelement, welches aber genauso definiert ist wie das "content"-Element.

 

[Maik]

Zeig doch bitte mal den vollständigen Quellcode (HTML + CSS), denn ich kann den vermeintlichen Fehler mit deinen Aussagen nicht reproduzieren.

 

[Arndtinho]

hier das css-file:

#container {
   width:            800px;
   height:           auto;
   margin-left:      auto;
   margin-right:     auto;
}

#content {
   min-height:       450px;
   height:           auto;
   width:            800px;
}

#left {
   float:            left;
   min-height:       450px;
   height:           auto;
   width:            199px;
}

#right {
   float:            right;
   min-height:       450px;
   height:           auto;
   width:            599px;
   border-left:      1px #0166FF solid;
}

/** nur für IE 5.5 - 6.x **/
/**************************/
* html #container { 
   height:           450px; 
}

* html #content { 
   height:           450px; 
}

* html #left { 
   height:           450px; 
}

* html #right { 
   height:           450px; 
}

und hier das html-file:

<div id="container">
   
   <div id="content">
      
      <div id="left"></div>
      
      <div id="right"></div>
   </div>
</div>

 

[Maik]

Die Floatumgebung muß zum Abschluss noch "gecleart" werden, damit die Box #content ihre tatsächliche Höhe annimmt - siehe hierzu auch http://positioniseverything.net/easyclearing.html:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Die Klasse .clearfix wird dann zusätzlich im DIV #content aufgerufen:

<div id="content" class="clearfix"> ... </div>

 

[Arndtinho]

danke. werde mir das mal anschauen.