(min-)height 100% funktioniert nicht

Hallo zusammen
Ich bin gerade das Layout einer Website am erstellen und komme nicht weiter.
Es geht um folgende Seite:
http://unicorn.bplaced.net/_neu/index.html

Und zwar hätte ich gerne den

“page_content” bis unten an den Seitenrand und nicht nur so gross, wie der Inhalt ist.

Relevante Ausschnitte von CSS:

html, body {
	min-height:100%;
	width:100%;
	height:100%;
	padding: 0px;
	margin: 0px;
}
#content{
	width:960px;
	min-height:100%;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:auto;
	margin-right:auto;
	padding: 0px;
}
#page_content{
	min-height:100%;
	height:auto !important;
	height:100%;
	width:560px; /* 570px - 10px Padding */
	margin-left:auto;
	margin-right:auto;
}

Und Kurzversion vom HTML:

<body>
<div id="content" class="shadow">
	<div id="nav_container">
    	<div id="nav_content">
        	[...]
        </div>
    </div>
    <div id="page_content">
        <p>Lorem ipsum</p>
    </div>
</div>
</body>

Ich verstehe nicht ganz, wieso page_content trotz min-height:100% nicht den gesamten Platz einnimmt, den das Eltern-Element ihm bietet.
Interessant finde ich noch die Angaben, die ich erhalte, wenn ich in Firebug im Tab “Berechnet” schaue:
Dort gibt es den Punkt “height”, welcher mit etwa 257px angegeben wird (also nur so gross wie der Inhalt).
Weiter unten findet man den Punkt “min-height”, welcher mit etwa 489px angegeben wird (also wahrscheinlich die gesamte, zur Verfügung stehende Höhe).
Aber wieso wird min-height nicht angewendet, wenn es doch richtig berechnet wird?

Vielen Dank schon mal im Voraus…

Ich vermute, #content darf nicht auf min-height: 100% stehen, sondern für die Höhe muß ein
fester Wert vorliegen, der nie vom Inhalt abhängt, wenn die Höhe eines Inhaltselementes sich
darauf beziehen soll.

Und was soll das Folgende?

  min-height:100%;
   height:auto !important;
   height:100%;

Was denn nun?
Soll die Höhe nun automatisch bestimmt werden oder doch lieber nicht?

Hallo hoffmann
Schön, wieder eine Antwort von dir zu erhalten :wink:
Die Bachelor-Arbeit ist übrigens inzwischen fertig und abgegeben, danke nochmals für deine Hilfe bei den Nullstellen :slight_smile:

[quote=“hoffmann”]Ich vermute, #content darf nicht auf min-height: 100% stehen, sondern für die Höhe muß ein
fester Wert vorliegen, der nie vom Inhalt abhängt, wenn die Höhe eines Inhaltselementes sich
darauf beziehen soll.
[/quote]
Ja, das scheint wirklich der Fall zu sein.
Wenn ich dem #content eine Grösse von 1000px vorgebe, dann wird auch der #page_content gross. Allerdings wird er dann so gross, dass er über den #content hinaus ragt und zwar wahrscheinlich um die 115px, um die er wegen der Navigation nach unten versetzt ist.
Schade, ich hatte gehofft, dass das ganze genug schlau ist, dass ein “height:100%” einfach den verfügbaren Platz füllt…
Siehst du irgendeine Möglichkeit, das Gewünschte zu erreichen, ohne eine feste Seitengrösse (bzw. fixer Wert für #content) zu verwenden?

Das ist folgendes Konstrukt:
http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html

Hallo samo

Damit das so Funktioniert wie du möchtest musst du deine Navigation aus dem div content nehmen und vor dem div content einbinden.

Dann die Breite auf 960px stellen und die Ausrichtung mit margin: 0 auto; des nav div`s anpassen.
Das Hintergrundbild in den body setzen.
Damit das Bild nur den Teil bedeckt den du möchtest solltest du das Bild auf die breite 960px skalieren.

UND das padding im page-content entfernen!

Gruß
camou !coffee

Wenn man etwas mit 100% der Seitenhöhe hinter etwas anderes mit einer Höhe größer als 0 setzt,
wird die gesamte Höhe natürlich immer größer als 100% sein, das ist vermutlich nicht so optimal.

Hier ist ja ungefähr abschätzbar, wie hoch die Navigation sein wird, vermutlich 1 bis 3em.
In so einem Falle würde ich eher versuchen, die zentralen Inhalte absolut zu positionieren,
also von unten und von oben.

Wenn ein Element vorangig Text enthält, ist es zudem schlecht, die Breite in Pixeln festzulegen.
Wenn man fürchtet, daß die Zeilenlänge zu groß wird und darunter die Lesbarkeit leiden
könnte, kann man etwa sowas verwenden: max-width: 60em; margin: auto
Ist der Anzeigebereich kleiner, paßt sich der Inhalt dann flexibel an.

Hinsichtlich des von mir angesprochenen Teils der CSS-Anweisungen:
!important sollte man generell in Autorenstilvorlagen und in Stilvorlagen des
Darstellungsprogrammes vermeiden.
Und gerade um Mängel des MSIE zu kompensieren, gibt es von Microsoft ja die sogenannten
conditional comments, mit welchen man für den spezielle zusätzliche Stilvorlagen einbinden
kann, um dessen Fehler zu kompensieren.
Das erübrigt dann, die Kompensation für dieses Programm in die normale Stilvorlage
reinschmieren zu müssen.
Von daher sollte man der refenzierten Seite nicht folgen, sondern sie besser ignorieren.

Hallo zusammen
Vielen Dank für eure Antworten.
Ich bin jetzt doch auf position:… umgestiegen. Sieht auch soweit gut aus, das einzige Problem ist, dass der Text jetzt beim Scrollen hinter der Navigation durchfährt. Sieht doof aus :p
http://unicorn.bplaced.net/_neu/index.html

Wie kriege ich das hin, dass das Text-div immer unterhalb der Navigation aufhört und nie dahinter ist?

Mit der Bedingung, dass:
[ul]
[li] ich der Navigation keine Hintergrundfarbe zuweisen muss, sonder sie transparent bleibt und das Hintergrundbild sichtbar ist[/li]
[li] der Scroll-Balken am normalen Ort bleibt und nicht innerhalb der Seite irgendwo ist (z.B. bei einem div mit overflow:scroll)[/li][/ul]

Das, was Camou gesagt hat, habe ich somit teilweise gemacht. Das einzige, bei dem ich den Grund nicht verstanden habe, ist das:

Und zu dem, was hoffman gesagt hat:

Danke für den Tipp. Aber da die Schriftgrösse definiert wird und auch der Text-Container nicht breiter wird, als so wie er jetzt ist, sollte es eigentlich keine langen Zeilen geben. Ausser, der User stellt die Schrift manuell auf winzig klein, dann ist er aber selber Schuld…
Und wenn ich die Container-Breite relativ zur Schriftgrösse setze, dann zerreisst es mir doch das Design, sobald der User an der Schriftgrösse herumfummelt, oder?

Ein paar Responsive-Anpassungen sind aber noch geplant, da das ganze bei einer iPhone-Screengrösse zurzeit noch ziemlich schlecht aussieht…

Danke!

Der Tip mit der maximalen Breite bezieht sich auf die seltsame Angabe, daß irgendein
Textcontainer 960px breit ist - sowas ist unsinnig, weil man als Autor ja nicht die optimale
Schriftgröße des Lesers kennt und auch nicht die Größe des Anzeigebereiches, das sollte
sich alles schon flexibel anpassen.
In dem Falle weiß man aber, daß Zeilen mit mehr als 60 Zeichen etwas anstrengend beim
Lesen werden können, weil man dann eventuell bei Zeilenumbrüchen erst wieder die nächste
Zeile suchen muß.
Statt also die Breite auf ein recht unsinniges Maß wie 960px festzulegen, schreibt man also
besser max-width: 60em.

Sowas wie font-size:13pt für html oder body anzugeben, ist natürlich auch Unfug, weil man es
dem Leser schon selbst überlassen sollte, welche Schriftgröße dieser bevorzugt, das kann der
Autor ja nicht beurteilen. Allenfalls kann man für Überschriften und sowas relativ zur vom
Nutzer eingestellten Schriftgröße ein größeres Maß wählen, etwa 2em für eine h1.

Hinsichtlich der Positionierung: Man kann versuchen, alle Ecken der Navigation und des
sonstigen Inhaltes absolut zu positionieren, dann überlappt da auch nichts, overflow: auto
gibt man für solche Boxen natürlich immer an, der Rollbalken ist dann normalerweise immer
rechts vom Inhalt (und gegebenenfalls unten). Wenn man also mit right: 0 positioniert, ist
der Rollbalken auch am rechten Rand.

Ich denke, die Stilvorlage ist viel zu kompliziert für solch eine einfache Anwendung, daher gibt
es da auch so viele Probleme, zudem ist sie wie beschrieben durch die Festlegung einer
Breite in Pixeln unnötiig unflexibel.
Wenn man das anständig plant, braucht man da auch keine gesonderte Stilvorlage für
kleine Anzeigebereiche, das paßt sich dann alles automatisch an, das können die
Darstellungsprogramme alleine sehr gut, wenn man sie nur läßt.