✔ min-height Problem!

[ribasa]

Hallo,

ich bin gerade dabei, eine Seite zu erstellen... Grundlegender Aufbau wie folgt:

<div class="header">Headerinhalte</div>

<div class="wrapper">

<div class="content">Hauptinhalte der Seite..</div>
<div class="sidebar">eine rechte Sidebar</div>

</div>
<div class="footer">Footerinhalte</div>

Dabei wird der Hauptinhalt (Wrapper-Klasse) mittig dargestellt und soll zudem seine Höhe (also die height) dem Inhalt der Seite anpassen! Dennoch soll aber immer eine bestimmte "Mindesthöhe" dargestellt werden. Habe der Klasse eine min-height von 100% gegeben und auch mal eine feste Größe (z. B. 700px). Doch bei beidem funktioniert es nicht, dass wenn die Höhe (height) größer ist, dass der wrapper auch "mitwächst". Der kann bei dem Template auf einzelnen Seiten nämlich auch mal über 3000px groß werden, auf anderen aber nur ca. 600-700....
Habe dies im Firefox getestet und habe da noch immer keine Lösung, damit die Seite im Firefox korrekt angezeigt wird..
Hier mal der CSS-Code:

* { margin:0; padding:0; }

html, body { height:100%; }
	
body { margin:0; padding:0; width:100%; background-image:url(../images/background.jpg); background-size:100%; }

.wrapper {
	margin:50px auto 30px auto;
	position:relative;
	width:1050px;
	min-height:100%;
	background-color:red;
	color:#000000;
	box-shadow:0 0 15px #000000; }

.header {
	width: 100%;
	height: 80px;
	background-color:#181818;
	color:#FFF }

.content {
	width:650px;
	float:left;
	padding:0 25px 0 25px;;
	font-family:'Droid Sans', sans-serif; }

.sidebar {
	width:350px;
	float:left;
	background-color:yellow; }
	
.footer {
	width:100%;
	height:100px;
	clear:both;
	background-color:green;
}

Hab schon überall geguckt usw. - aber habe noch immer keine Lösung! Ich hoffe ihr könnt mir da helfen

 

[SpiceLab]

Hab schon überall geguckt usw. - aber habe noch immer keine Lösung!

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

 

[ribasa]

Perfekt! Klappt jetzt genau so, wie es sein soll - super Link