nicht angemeldet
DIV als FRAME ersatz soll scrollbar sein
Hi!
Ich habe hier eine Seite die Ursprünglich mal aus 3 Frames bestand. Ich wollte das ganze nun umstellen und dabei alle Tabellen und Frames loswerden. Das Grobe Layout ist so, daß alle DIVs 100% Breite haben. die oberen 3 sollen fest stehen und der vierte bei Bedarf eine vertikale Scrollbar erhalten.
<body onload="init()">
<div class="logo">
<img class="left" src="../images/wings_logo.gif"/>
<img class="right" src="../images/sun_top_logo.gif"/>
</div>
<div class="letters">
<div class="left">
<a onclick="showSection(this)" id="A">A</a>
<a onclick="showSection(this)" id="B">B</a>
:
:
<a onclick="showSection(this)" id="Z">Z</a>
</div>
<div class="right">
<a onclick="showIndex(this)" id="index">Index</a>
</div>
</div>
<div id="menu" class="menu">
</div>
<div id="content" class="content" style="clear:both">
</div>
</body>
Das CSS dazu:
body {
box-sizing:border-box;
-moz-box-sizing:border-box;
color:#35556b;
font-family:arial;
font-size:13px;
text-decoration:none;
padding:0px;
border:0px;
margin:0px;
height:100%;
}
/* the logo */
div.logo {
width:100%;
overflow: hidden;
background:url(../images/hg_top.gif) repeat-x;
}
div.logo img.left {
float: left;
vertical-align:middle;
padding: 6px 0% 0% 7%;
}
div.logo img.right {
float: right;
vertical-align:middle;
padding: 0%;
}
/* letter bar */
div.letters {
width:100%;
white-space:nowrap;
background-color:#5382a1;
overflow: hidden;
}
div.letters .left {
background-color:inherit;
float:left;
padding: 0% 0% 0% 3%;
}
div.letters .right {
background-color:inherit;
float:right;
padding: 0% 3% 0% 0%;
}
/* the background for the list of keywords */
div.menu {
width:100%;
height:5em;
background-color:#edf1f5;
overflow:auto;
padding:0px;
}
div.content {
width:100%;
overflow:auto;
}
Leider erscheint die scrollbar nicht im "content" frame sondern über die gesamte Höhe und die DIVs scrollen alle.
Kann mir jemand einen Hinweis geben?
Dankeschön!
-
Da wirst du wohl keinen erfolg haben, da immer die ganzen layer mitscrollen. Du könntest den kopf und fussbereich fixieren, so dass der content unter dem kopf scrollt. ansonsten wäre ne möglichkeit ein iframe, aber genau das willst du ja vermeiden.
-
Da wirst du wohl keinen erfolg haben, da immer die ganzen layer mitscrollen. Du könntest den kopf und fussbereich fixieren, so dass der content unter dem kopf scrollt.
Wenn ich das mache, muß ich aber dafür sorgen, daß oberhalb des Content genügend freier Raum ist. Dazu müßte ich wissen wie hoch dieser Berreich ist. Aber gerade das, die Angabe fester Größen, möchte ich auch nicht haben
** ansonsten wäre ne möglichkeit ein iframe, aber genau das willst du ja vermeiden.
Ausprobiert. Hilft auch nicht weiter, da ich hier wohl auch mit einer festen Größe (höhe des Frames) arbeiten müßte.
Alles sehr unbefriedigend :-(
-
Welche größe meinst du denn. Der Kopfberecih wird doch immer gleich bleiben oder nicht???
-
Welche größe meinst du denn. Der Kopfberecih wird doch immer gleich bleiben oder nicht???
Ja. Aber da er Text enthält, kann ich nicht einfach sagen "100px".
-
-
-
-
Ich habe mir jetzt wie folgt beholfen:
Ich lade den content ohnehin über JavaScript XMLHttpRequest. Um meine 3 Header DIVs habe ich jetzt noch einen fixen DIV gesetzt. Wenn ich nun den Content geladen habe, schaue ich nach, wie hoch (clientHeight) der fixe DIV ist, ond setze vom Content DIV das paddingTOP auf diesen Wert.
Damit ist unterhalb des Headers genügend Freiraum.
Unschön ist zwar, daß die Scrollbar über die gesamte Höhe geht, aber irgendwo muß man wohl immer Kompromisse eingehen.
Fällt irgendjemandem hier ein Nachteil dieser Methode auf, außer:
1. JavaScript muß aktiv sein (muß ohnehin da keine WebPage sondern Applikation)
2. Resize auf zu schmal oder zu wenig hoch führt zu Mülldarstellung.Danke,
Skeeve