nicht angemeldet
Div mit Höhe: 100%, aber Rand unten+Scroll-Problem
Hallo zusammen,
Ich stehe vor einem kleinen Design-Problem und hoffe ihr könnt mir helfen.
Ich bin gerade dabei das Table-Layout von meiner Seite in ein Div-Layout umzubauen! Klappte bis auf einige kleine Problemchen etc. auch ganz gut, aber an einer stelle hänge ich jetzt schon 2 Stunden und weiß nicht, wie ich das bewerkstelligt kriege:
Das Layout sieht folgendermaßen aus: http://svst.nhonnef.de/markup.png
Zur Erklärung: Ganz oben ist ein Header, dann kommt links ein Menü gefolgt von einem Submenü rechts und darunter der Content-Bereich! Wichtig ist, dass Header+Submenü+Content zusammen 100% des Browserfensters ergeben sollen, also oben und unten abschließen. Das geht auch soweit ganz gut, bis auf 2 Probleme:
1. Unterhalb des Content-Divs soll noch ein kleiner Rand von etwa 10px bleiben. Da ich aber die Höhe auf 100% gesetzt habe wird dieser nicht angezeigt bzw. das Div geht sogar noch über den Browserrand hinaus. Ließe sich mit einem position: fixed zwar regeln, aber da sich die Höhe des Submenüs verändern kann wüsste ich nicht, wie ich den oberen Rand definieren sollte.
(Screen: http://svst.nhonnef.de/screen1.png - Ganz unten)
2. Das zweite Problem hat was mit dem ersten zutun: Wenn der Inhalt des Content-Divs länger ist als das Browserfenster, dann wird zwar wie gewollt ein Scrollbalken am Div angezeit, dieser geht aber über die Länge des Browserfensters hinaus, sodass man den unteren Pfeil der Scrollleiste nicht mehr sehen kann.
(Screen: http://svst.nhonnef.de/screen2.png - Ganz unten rechts)
Aussehen soll es eigentlich so: http://svst.nhonnef.de/screen3.png (Das ist jetzt mit position: fixed, was aber in der Praxis aus schon genannten Gründen nicht geht!
Mein Quelltext sieht vereinfacht folgendermaßen aus:
============================== CSS ==================================
div.head
{
background: white;
color: #2E71B8;
width: 100%;
height: 84px;
}
div.content
{
position: fixed;
top: 84px;
bottom: 0px;
overflow: hidden;
}
div.InterfaceDiv
{
width: 100%;
height: 100%;
overflow: hidden;
}
div.menu
{
padding: 5px;
float: left;
width: 175px;
}
div.main
{
padding: 5px;
height: 100%;
overflow: hidden;
}
div.homeDiv
{
padding: 10px;
overflow: auto;
height: 100%;
width: 100%
margin-bottom: 10px;
}
============================= HTML ==================================
<html>
<body>
<div class="head">Das ist der Header</div>
<div class="content">
<div class="interfaceDiv">
<div class="menu">Hier steht das Manü</div>
<div class="main">
<div class="submenu">Hier steht das Submenü</div>
<div class="homeDiv">Und hier steht der eigentliche Inhalt</div>
</div>
</div>
</div>
</body>
</html>
... das muss leider so sehr verschachtelt sein, weil ich die Inhalte der Divs teilweise per AJAX lade und da auch andere Layouts geladen werden könnten. Also ich bin bisher der Meinung, dass es dafür so verschachtelt sein muss. ^^
So...viel Text für ein kleines Problem. Ich hoffe ihr wisst Rat!
Lg Niko
-
Arg noch die CSS-Attribute von html und body vergessen:
html
{
overflow: hidden;
height: 100%;
}body
{
margin:0px;
padding: 0px;
font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana;
overflow: hidden;
color: #001764;
background: #5880CB;
height: 100%;
}Lg Niko
-
Hi,
Das Layout sieht folgendermaßen aus: http://svst.nhonnef.de/markup.png
Zur Erklärung: Ganz oben ist ein Header, dann kommt links ein Menü gefolgt von einem Submenü rechts und darunter der Content-Bereich! Wichtig ist, dass Header+Submenü+Content zusammen 100% des Browserfensters ergeben sollen, also oben und unten abschließen. Das geht auch soweit ganz gut, bis auf 2 Probleme:
- Unterhalb des Content-Divs soll noch ein kleiner Rand von etwa 10px bleiben. Da ich aber die Höhe auf 100% gesetzt habe wird dieser nicht angezeigt bzw. das Div geht sogar noch über den Browserrand hinaus. Ließe sich mit einem position: fixed zwar regeln, aber da sich die Höhe des Submenüs verändern kann wüsste ich nicht, wie ich den oberen Rand definieren sollte.
Wenn's so variabel bleiben soll, dann bleibt dir wohl nur, JavaScript zu Hilfe zu nehmen, und die noetige Hoehe des Content-Bereiches auszurechnen.
- Das zweite Problem hat was mit dem ersten zutun: Wenn der Inhalt des Content-Divs länger ist als das Browserfenster, dann wird zwar wie gewollt ein Scrollbalken am Div angezeit, dieser geht aber über die Länge des Browserfensters hinaus, sodass man den unteren Pfeil der Scrollleiste nicht mehr sehen kann.
(Screen: http://svst.nhonnef.de/screen2.png - Ganz unten rechts)
Das liegt an der unguenstigen Verschachtelung, fixer Positionierung und overflow-Angaben.
Aussehen soll es eigentlich so: http://svst.nhonnef.de/screen3.png (Das ist jetzt mit position: fixed, was aber in der Praxis aus schon genannten Gründen nicht geht!
Wenn schon, dann solltest du m.E. fixe Positionierung "vernuenftig" einsetzen - so, dass ein "ganz normaler" Scrollbalken am Seitenrand entsteht, und nicht einer, der nicht ueber die komplette Hoehe geht und damit "Frames-Optik" simuliert.
Also entweder wuerde ich das, was beim Scrollen stehen bleiben soll, fix positionieren, und den eigentlichen Inhalt "darunter" Scrollen lassen - oder auf fixe Positionierung hier ganz verzichten.
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."-
Hallo ChrisB,
Danke erstmal für deine Antwort! =)
Wenn's so variabel bleiben soll, dann bleibt dir wohl nur, JavaScript zu Hilfe zu nehmen, und die noetige Hoehe des Content-Bereiches auszurechnen.
Hmm jo so hab ich das jetzt auch erstmal gelöst! Ist zwar nicht die schönste Lösung, aber es funktioniert und das ist ja das wichtigste. :)
- Das zweite Problem hat was mit dem ersten zutun: Wenn der Inhalt des Content-Divs länger ist als das Browserfenster, dann wird zwar wie gewollt ein Scrollbalken am Div angezeit, dieser geht aber über die Länge des Browserfensters hinaus, sodass man den unteren Pfeil der Scrollleiste nicht mehr sehen kann.
(Screen: http://svst.nhonnef.de/screen2.png - Ganz unten rechts)
Das liegt an der unguenstigen Verschachtelung, fixer Positionierung und overflow-Angaben.
Dieses Problem hat sich jetzt dank position: fixed auch gelöst.
Wenn schon, dann solltest du m.E. fixe Positionierung "vernuenftig" einsetzen - so, dass ein "ganz normaler" Scrollbalken am Seitenrand entsteht, und nicht einer, der nicht ueber die komplette Hoehe geht und damit "Frames-Optik" simuliert.
Genau diese Frames-Optik ist aber gewollt! Was ich nachgebaut habe ist ein Editor wie zb. Dreamweaver, bei denen mehrere "Seiten" gleichzeitig geöffnet sind und man mit Tabs durchnavigieren kann.
Lg Niko
- Das zweite Problem hat was mit dem ersten zutun: Wenn der Inhalt des Content-Divs länger ist als das Browserfenster, dann wird zwar wie gewollt ein Scrollbalken am Div angezeit, dieser geht aber über die Länge des Browserfensters hinaus, sodass man den unteren Pfeil der Scrollleiste nicht mehr sehen kann.