R
Rohan
Guest
Ich habe ein Layout erstellt, was auf der angezeigten Seite in sich abgeschlossen ist, also nicht die übliche Scrolleiste des Browsers anwendet sondern lediglich für den mainContent-div-Container eine eigene anzeigt, wenn nötig.
Dabei dachte ich mir dann, es wäre ja doof, wenn bei hohen Auflösungen nur ein kleiner Teil des Bildschirms für die Darstellung genutzt wird. Also soll eben die Seite vertikal soweit gestreckt werden, daß der Bildschirm voll ausgenutzt wird, und erst wenn dieser voll ist, kommt autoscroll zum Einsatz.
So einfach der Gedanke, umso schwerer die Umsetzung. Ich dachte mir, mit max-height könnte ich einfach eine entsprechende Angabe in % machen, sodaß eben je nach Auflösung der Bildschirm voll ausgenutzt wird. Ist der Bildschirm zu ende und noch nicht der komplette Inhalt angezeigt, erledigt autoscroll den Rest.
Blöderweise habe ich nun festgestellt, daß die beiden anscheinend nicht so ganz zusammenarbeiten, wie ich es gerne hätte und mir dachte.
Der Seitenaufbau ist folgendermaßen (ganz klassisch):
Das CSS für die entsprechenden Stellen dazu:
Ich hab nun bei container und mainContent schon versucht ein max-height mit % anzugeben, funktioniert aber beides nicht. Bei container wird lediglich der Container kleiner, der Inhalt steht dann eben über (logisch). Bei mainContent wird es gar nicht beachtet, die Seite wird also vollständig angezeigt und overflow:auto nicht beachtet. Aktuell stehe ich diesbezüglich auf dem Schlauch und weiß nicht, wie sich das umsetzen ließe. Erstmal geht es mit einer festgelegten Höhe, aber eine Lösung wie ich es genannt habe, wäre natürlich optimal.
Das ganze sollte übrigens ohne JavaScript funktionieren.
Danke im Voraus für entsprechende Hilfe.
Dabei dachte ich mir dann, es wäre ja doof, wenn bei hohen Auflösungen nur ein kleiner Teil des Bildschirms für die Darstellung genutzt wird. Also soll eben die Seite vertikal soweit gestreckt werden, daß der Bildschirm voll ausgenutzt wird, und erst wenn dieser voll ist, kommt autoscroll zum Einsatz.
So einfach der Gedanke, umso schwerer die Umsetzung. Ich dachte mir, mit max-height könnte ich einfach eine entsprechende Angabe in % machen, sodaß eben je nach Auflösung der Bildschirm voll ausgenutzt wird. Ist der Bildschirm zu ende und noch nicht der komplette Inhalt angezeigt, erledigt autoscroll den Rest.
Blöderweise habe ich nun festgestellt, daß die beiden anscheinend nicht so ganz zusammenarbeiten, wie ich es gerne hätte und mir dachte.
Der Seitenaufbau ist folgendermaßen (ganz klassisch):
HTML:
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="mainContent"></div>
<div id="footer"></div>
</div>Das CSS für die entsprechenden Stellen dazu:
Code:
#container{
max-width: 51em; /* Bei der Standardeinstellung von 16px für die Schrift ist der Container bei 51em 888 px breit. */
background: #FFF;
margin: 3% auto 2%; /*Zentrierung der Seite sowie Abstand oben und unten. */
padding: 1.9em 2.2em 0.4em; /* Abstand zwischen Container-Außenrand und mainContent. */
text-align: left; /* Überschreibung der Einstellung text-align: center im Body-Element. */
border-radius: 5px; /* runde Ecken nach CSS3, für Webkit-Browser sowie IE durch HTC-Skript */
-moz-border-radius: 5px; /* runde Ecken für Firefox */
behavior: url(border-radius.htc); /* runde Ecken für IE durch Verwendung von VML durch Skript (benötigt Active-X) */
line-height: 1.5;
}
#nav {
float: left;
font-family: Nobile, Tahoma, Geneva, sans-serif;
font-size: 1em;
margin-top: 3em;
width: 8em; /* Breitenangabe weil fließend. */
max-width: 8em;
padding: 15px 0; /* Durch die Auffüllung oben und unten entsteht visueller Leerraum. */
}
#mainContent{
font-size: 0.95em;
max-width: 43em;
max-height: 32em;
margin-left: 0.8em;
overflow: auto;
}Ich hab nun bei container und mainContent schon versucht ein max-height mit % anzugeben, funktioniert aber beides nicht. Bei container wird lediglich der Container kleiner, der Inhalt steht dann eben über (logisch). Bei mainContent wird es gar nicht beachtet, die Seite wird also vollständig angezeigt und overflow:auto nicht beachtet. Aktuell stehe ich diesbezüglich auf dem Schlauch und weiß nicht, wie sich das umsetzen ließe. Erstmal geht es mit einer festgelegten Höhe, aber eine Lösung wie ich es genannt habe, wäre natürlich optimal.
Das ganze sollte übrigens ohne JavaScript funktionieren.
Danke im Voraus für entsprechende Hilfe.
