✔ 2 DIVs in der Höhe mit 100 % an Parent-DIV anpassen

Status
Nicht offen für weitere Antworten.
T

Thomas D

Erfahrenes Mitglied
Hallo!

Ich habe zwei DIVs, die nebeneinander stehen und dynamisch mit Content befüllt werden. Nun sollen das kleinere in der Höhe jeweils an das größere angepasst werden. Mein erster Gedanke bestand darin, beide DIVs in ein Parent-DIV zu packen und den Child-DIVs als height-Eigenschaft 100% zu geben.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <style type="text/css">
    .post
	{
		float:left;
		max-width:50%;
		width: 17.9em;
		border: 1px solid black;
		height: 100%;
	}
		
	.postRow
	{
	   position: relative;
	   border: solid 1pt black;
    }
    
    .clear {
	clear:both;
}

  </style>
  <title></title>
  </head>
  <body>
  
  <div class="postRow">
		<div class="post" id="post-31">
            <p>Test Text</p>
		</div>
		
		<div class="post" id="post-30">
            <p>Test Text<br />ffff</p>
		</div>
        <div class="clear"></div>
    </div> 
  </body>
</html>

Nur leider tut sich bei der height-Eigenschaft von post nichts, obwohl dieses ja das Vaterelement der beiden DIVs sein müsste. Was mache ich falsch :confused: ...
 
Hi,

in diesem Modell ist nicht .post, sondern .postRow die Parentbox, und ihr Rahmen umschliesst alle Childboxen.

Wenn sich die benachbarten Childboxen .post in der Höhe angleichen sollen, werf mal einen Blick in den Artikel AnyColumnLongest, der eine Vielzahl an Links zu unterschiedlichen Techniken bereithält, die solche "Equal-Height-Columns" erzeugen.

mfg Maik
 
Danke für den Link! Ich werde mal eine andere Methode probieren, wobei es sich bei der von mir angewandten ja um Variante E handelt und ich nicht weiß, warum diese nicht funktioniert ...
 
Thomas D hat gesagt.:
Danke für den Link! Ich werde mal eine andere Methode probieren, wobei es sich bei der von mir angewandten ja um Variante E handelt und ich nicht weiß, warum diese nicht funktioniert ...
Zum Vergrößern anklicken....
Dann lies bitte den zweiten Absatz zu dieser Technik:

Put a div wrapper element around all columns, then use relative positioning and set the children's height to 100%. In some cases, this does not give the desired result with MSIE - this can be worked around by setting the height to a fixed value of, say, 400px with an MSIE-only hack.
Zum Vergrößern anklicken....
mfg Maik
 
Das habe ich eh gelesen, aber ich verwende Opera und auch dort passt es nicht. In Firefox wird das Parent-DIV auf die Gesamt-Bildschirmgröße skaliert (also height: 100% vom Body-Tag geerbt). Doch auch das will man ja nicht wirklich erreichen ...
 
Code: 
        .postRow
        {
           position: relative;
           border: solid 1pt black;
           height:100%;
    }


führt zumindest im IE und Opera zum selben Ergebnis, wie im Firefox.

Aber alles, was an Inhalten darüber hinaus geht, führt nicht mehr zu dem gewünschten Ergebnis.

mfg Maik
 
Ja, aber das ist ja nicht gewollt ;). Das Parent-DIV sollte ja nur so groß sein, wie die Höhe des größeren Child-DIVs und nicht wie der gesamte Bildschirm.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück