✔ CSS Problem mit Höhe 100%

[Björn König]

Moinsen
ich hab da ein kleines problem und zwar hab ich zwei div elemente
einmal das wobei einer der divs in anderen liegt
Der innere is ändert seine höhe automatisch je nach dem was da für ein inhalt ist aber der äussere div leider nicht

.web_content_wrapper {
	margin-right: auto;
	margin-left: auto;
	width: 960px;
	height: 100%;
	border: 1px solid #F0F;
	background-color: #0F0;
	position: relative;
}
.content_wrapper {
	clear: none;
	float: left;
	width: 580px;
	position: relative;
	background-color: #FFF;
	height: 500px;
	border: 1px solid #000;
	padding-right: 10px;
	padding-left: 10px;

}

/////////////////////
<div class="web_content_wrapper"><--Der soll automatischdie höhe anpassen wenn "Content_wrapper" auch an höhe zunimmt
<div class="content_wrapper">Dynamischer Inhalt</div>
</div>

Also der äussere DIV is der hintergrund für die website der soll automatisch mit der höhe mitgehen sobald "content_wrapper" an höhe gewinnt , aber irgendwie geht das nich nur bei festen werten geht das buw geht nich da es bei der höhe bleibt (sieht doof aus) kann mir da jemand was helfen?
p.s ich hab danach gesucht aber die lösungen klappen nich height 100% oder auto

 

[dreifragezeichen]

height:100% wird trotz der relativen Angabe als absolute Höhe im Verhältnis zum vertikalen Viewport interpretiert. Alles was an Inhaltsumfang darüber hinausgeht, "überlappt" die Box an ihrem unteren Rand, läuft darüber hinaus, ohne sie "mitwachsen" zu lassen.

Du benötigst aber für .web_content_wrapper eine Mindesthöhe.

Versuch's deshalb stattdessen hiermit:

html,body {
height:100%;
margin:0;
}
.web_content_wrapper {
	margin-right: auto;
	margin-left: auto;
	width: 960px;
	min-height: 100%; /* anstelle height:100% */
	border: 1px solid #F0F;
	background-color: #0F0;
	position: relative;
}

 

[Björn König]

100 height is doch die ganze höhe von oberen rand bis unteren rand oder?

weil beimir is das jetzt so
aber ich möchte das web_content_wrapper ja mit content_wrapper mit geht nach unten oder hab ich da was falsch gemacht ******!

 

[dreifragezeichen]

So wie's ausschaut, hast du zusätzlich noch das Clearing der Floats vergessen ;-)

<div class="web_content_wrapper">
  <div class="content_wrapper">...</div>
  <!-- hier folgt evtl. ein weiteres <div> -->
  
  <div style="clear:both;">&nbsp;</div>
</div>

Siehe Webmaster FAQ > CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an? mit der eleganteren CSS-Technik, die das von mir demonstrativ hinzugefügte inhaltsleere <div> überflüssig macht, das hier lediglich zum "Clearing" dienen würde, und den HTML-Quellcode unnötig aufbläht.

 

[Björn König]

moa ich könnt mir jetzt selber ein klatschen xD

ok das ****t danke für deine hilfe