✔ height automatisch anpassen

[StudentZHW]

hallo zusammen,
ich habe ein kleines layout problem bei dem mir vielleicht jemand helfen kann. und zwar habe ich verschiedene geschachtelte divs und nun möchte ich, dass wenn der content div mehr inhalt hat als überlich, die anderen divs ebenfalls länger werden. ich hab es lange versucht, aber leider ohne erfolg und der inhalt vom content div geht einfach über den main div hinaus.

Hier mein vereinfachter Code:

<div id="container">
            <div id="main">
				<div id="navigation"> </div>
                                <div id="content"> </div>
            </div>
            <div id="footer"></div>
</t:div>

CSS:

.main{
	height:560px;
	background-color:#FFFFFF;
	border-right: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
}


.navigation{
	background-color:#F9F9FF;
	width:163px;
	height:560px;
	float:left;
	margin:0px;
	padding:0px;
	border:0px;
	border-right: 1px solid #CCCCCC;
}

.content{
	background-color:#FFFFFF;
	height:560px;
	width:480px;
	float:left;
	margin:0px;
	padding-left:24px;
	border:0px;
	
}

Hat vielleicht jemand erfahrungen mit sowas?

Vielen dank für die hilfe!

 

[Maik]

Hi,

Fehler Nr.1: Du hast im HTML-Code ID-Bezeichner, im Stylesheet aber Klassen-Bezeichner angegeben.

Fehler Nr.2: Im schliessenden </div>-Tag des DIVs #container haben sich zwei Zeichen verlaufen, die dort nichts zu suchen haben.

Zu deiner Frage: Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Zudem behandeln die standardkonformen Browser die gesetzten height:560px-Deklarationen als fixe Höhe, und dehnen die Boxen nicht weiter aus, wenn ihr Inhalt die vorgegebene Höhe überschreitet.

Mit dieser Regel richtest du browserübergreifend eine Mindesthöhe für die Boxen ein:

min-height:560px; /* Mindesthöhe in modernen Browser */
height:auto !important; /* auto-height mit !important-Regel für moderne Browser */
height:560px; /* Mindesthöhe in IE */

Somit ist der Begriff "width" im Topic etwas falsch gewählt.

Und achte doch bitte in deinen Beiträgen auf die Groß- und Kleinschreibung, wie in der Netiquette (Nr.15) erwünscht. Vielen Dank

 

[StudentZHW]

Hallo Maik

Herzlichen Dank für dein Bemühungen. Nun ich erstelle eine Webapplikation und benutze dazu Java Server Faces mit Facelets. Nun habe ich das Problem, dass ich keine CSS ID's verwenden kann bzw. bis jetzt habe ich noch keine Lösung gefunden.

Es gibt für den Tomahawk Tag <t:div> verschiedene Attribute, unter anderem auch ID und StyleClass.

ID

The developer-assigned ID of this component. The ID must be unique within the scope of the tag's enclosing naming container (e.g. h:form or f:subview). This value must be a static value.

styleClass:

The class to use for this div.

Da es sich bei der ID nicht um eine CSS ID handelt, sondern um eine ID für die JSF-Komponente weiss ich nicht wie ich folgenden Code mit JSF realisieren kann:

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

 

[Maik]

Wenn du keine "herkömmlichen" IDs verwenden kannst, rufst du eben im class-Attribut beide Klassen-Namen auf, denn das ist ohne weiteres in der "CSS-Welt" technisch möglich.

Außerdem muss die Technik auf das DIV main angewendet werden, da sich die beiden floatenden Blöcke in ihm befinden:

<div class="main clearfix"> ... </div>

Alternativ kannst du auch in den Selektoren die Klasse .clearfix durch .main ersetzen:

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

.main {display: inline-block;}

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

<div class="main"> ... </div>

 

[StudentZHW]

Danke Maik, es hat geklappt!
Habe nun einfach beide Klassen verwendet, so wie es du vorgeschlagen hast.

Danke!

 

[Maik]

Fein

Und damit zukünftige Hilfesuchende durch den Topic "width automatisch anpassen" hier nicht auf's Glatteis geführt werden, habe ich den Eigenschaftsnamen entsprechend ausgetauscht.