div auf Größe des äußeren, größeren div

Status
Nicht offen für weitere Antworten.
O

online

Erfahrenes Mitglied
Hallo zusammen,

ich habe zwei div Layer, wobei einer, mit der Häfte der Breite des anderen, in diesem drin steckt.

HTML: 
<div id="groesser">
    <div id="kleiner"></div>
</div>

Wie schaffe ich es, dass der kleinere Layer immer die gleiche Höhe hat, wie der Große, auch wenn man den großen verändert?

ich habe es schon mit height:100% versucht. Leider ging das nicht.

Hoffe auf Hilfe.

MFG
Online
 
Also folgendes hat bei mir funktioniert:

HTML: 
<div style="background-color:#000000;height:50%;widht100%;" id="groesser">
 <div id="kleiner" style="background-color:#FF0000;height:100%;width:50%;">
 </div>
</div>

Auch wenn man die Höhe des Äußeren Div's ändert, ist das innere genau so hoch wie daß äußere.
 
Hi,

wenn das Dokument im Standards-Mode übergeben wird, wäre noch folgende CSS-Regel erforderlich:

Code: 
html,body {
height: 100%;
}

Zudem ist dir bei der ersten Breitenangabe ein Tippfehler unterlaufen:

Code: 
<div style="background-color:#ffff00;height:50%;width:100%;" id="groesser">
     <div id="kleiner" style="background-color:#FF0000;height:100%;width:50%;"></div>
</div>
 
vielen Dank für die Antworten.
Leider funktioniert das nicht so ganz bei mir. Ich kenne mich zwar einigermaßen gut mit CSS aus, aber mit relativen Höhen überhaupt nicht.

Hier einmal der Plan, wie es aussehen soll.
Ich wollte ein tabelless layout machen, war dann auch so weit, dass die Ebenen an den Stellen waren, an denen sie sein sollten, doch die höhen bekam ich nicht hin.

Hier der body:

PHP: 
<body>
<div id="ganz">
	<div id="oben"></div>
	<div id="content">
		<div id="menue">
			<div id="menueinhalt">
		    </div>
			<div id="logo"></div>
		</div>
		<div id="inhalt">
		  <div id="text">
	      </div>
			<div class="bilder">
			</div>		
		</div>
	</div>
	<div id="bottom">
	</div>
</div>
</body>

und das css:
PHP: 
html,body {
height: 100%;
}
body {
	text-align:center;
	overflow:auto;

}
* {
    margin:0px;
    padding:0px;
}
#ganz {
	margin: auto;
	width:770px;
	height:auto;
}
#content {
	width:770px;
	text-align:left;
}

#menue {
	width:198px;
	float:left;
	vertical-align:bottom;

}

#inhalt {
	width:572px;
	float:right;

}

#text {
	width:472px;
	float:left;

}

.bilder {
	width:100px;
	float:left;

}

Ich habe jetzt schon ganz verrückte Sachen ausprobiert, doch auf keinen Weg wird die Seite so, dass der mittlere Teil immer gleich groß ist, und dass dabei der gelbe Layer am unteren Rand bleibt.

Hoffe ihr könnt mir weiterhelfen, bevor ich verzweifel.

Herzlichen Dank
Online
 

Anhänge

  • div.gif
    div.gif
    3,3 KB · Aufrufe: 18
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück