Problem mit den Abständen...

[DarkSebbo]

Hallo Leute,
ich bin momentan dabei mir eine kleine Homepage mit PHP/HTML und eben CSS zu bauen.
Dabei bin ich auf folgendes Problem gestoßen:
Ich habe auf meiner Startseite, hier der Link:
http://oddzone.bplaced.net/
das div mit dem Inhalt mir einer Mindestgröße versehen und zentriert.
Wenn mein Inhalt jetzt aber mehr wird, sodass das die weiße Box vergrößert werden muss, passiert das zwar aber der untere Abstand zum dunkelgrauen Hintergrund verschwindet.
Hier wieder ein Link:
http://oddzone.bplaced.net/mehrInhalt/

Woran liegt das? Welche Eigenschaft muss anders gesetzt werden damit sowohl die Mindesthöhe, als auch der Rand Unten bleibt wenn mehr Inhalt eingefügt wird?
Habe schon an vielen Stellen nach einer Lösung gesucht aber bisher nichts gefunden.

Hier kommt jetzt noch meine CSS-Datei:

Code: Alles auswählen

html, body {
background-color: #333333;
margin: 0;
padding: 0;
height: 100%;
color:#000000;
font-size: 20px;
text-align:left;
}

#kopf{
background-color: #D2D2D2;
width: 100%;
vertical-align: middle;
margin: auto;
min-height: 10%;
height:auto !important;
height:10%;
overflow: hidden !important;
position: relative;
}

#inhalt {
background-color: #FFFFFF;
width: 80%;
vertical-align: middle;
margin: auto;
min-height: 90%;
height:auto !important;
height:90%;
overflow: hidden !important;
position: relative;
top: 5%;
left: 10%;
margin: 0px 0px 0px 0px;
}


Wäre super wenn ihr mir dabei helfen könntet. Vielen Dank schonmal im Voraus.
mfG
Sebastian

[Azra]

Bei html, body muss "height: 100%; rauss.
Dann:

Code: Alles auswählen

#inhalt {
background-color:#FFFFFF;
height:auto !important;
margin:40px auto;
min-height:90%;
overflow:hidden !important;
width:80%;
}


Hoffe der IE sieht das auch so gelassen

[DarkSebbo]

Hey,
vielen Dank für deine Hilfe.
Ich habe deine Änderungen übernommen.
Wenn der weiße Bereich vergrößert wird bleibt jetzt der Rand unten.
Allerdings scheint das mit der Mindestgröße nicht mehr hinzuhauen.
http://oddzone.bplaced.net/

Hast da eventuell noch jemand ne Lösung?
Hier jetzt nochmal die aktuelle CSS Datei:

Code: Alles auswählen

html, body {
background-color: #333333;
margin: 0;
padding: 0;

color:#000000;
font-size: 20px;
text-align:left;
}

#kopf{
background-color: #D2D2D2;
width: 100%;
vertical-align: middle;
margin: auto;
min-height: 10%;
height:auto !important;
height:10%;
overflow: hidden !important;
position: relative;
}

#inhalt {
background-color:#FFFFFF;
height:auto !important;
margin:40px auto;
min-height:90%;
overflow:hidden !important;
width:80%;
}

[Azra]

Achsoo, tut mir leid da habe ich etwas missverstanden.
Dann müssen die 100% im Body trotzdem drin bleiben.

Jedoch musst du die "height"-Angabe mit der "margin"-Angabe abgleichen.
In deinem Fall bekäme der body eine Höhe von 97% und der Inhalt eine Höhe von 3%.
Dann kommen wieder 100% für den Browser heraus.
Also bei

Code: Alles auswählen

body { height: 97%; }

und

Code: Alles auswählen

#inhalt { margin: 3% auto; }

[DarkSebbo]

Hey,
hat funktioniert.
Vielen Dank für deine Hilfe und ein schönes Wochenende!
mfG
Sebastian