position:fixed und Platz lassen?
Paul Ebermann
ich habe einige Seiten (ein mehrseitiges Formular, genauer gesagt), in
denen es jeweils oben einen Kasten mit einer Liste von Anweisungen
gibt, und darunter dann noch mehr "normaler Inhalt", mit dem man
arbeiten muss.
Bei einer dieser Seiten ist nun dieser Inhalt so lang, dass er schon
bei normalen Bildschirm-Schriftgroessen-Kombinationen nicht mehr ins
Fenster passt, man also scrollen muss.
Leider scrollt dann die Liste der Anweisungen auch weg, was zu einem
nervigen hin- und hergescrolle fuehrt.
Ich hatte mir gerade gedacht, dass position:fixed die Abhilfe
schafft ... aber dann verschwindet gleich zum Anfang auch der Anfang
des langen Inhaltes hinter dem Anweisungs-Kasten.
Das kann man natuerlich loesen, indem man hinter dem Kasten genug
Platz laesst ... etwa so:
----
div.akceptado-instrukcioj {
...
position:fixed;
}
div.akceptado-instrukcioj + * {
margin-top:15em;
}
----
Aber, wie weiss ich, wie hoch der Kasten ist? Das haengt ja von dessen
Inhalt ab, und der ist nicht auf jeder Seite der gleiche (und dazu
noch dynamisch generiert, also nicht einmal auf einer Seite immer der
gleiche).
Also, hier die Frage: Wie kann ich herausbekommen, wie hoch ein Block-
Element ist, und entsprechend viel Platz lassen?
Beispiele, die ich dazu im Netz gefunden habe, verwenden entweder
einen Kasten links (und einen entsprechend grossen linken Rand im Rest
des Dokumentes), oder haben eine festgelegte Groesse (und dazu passend
einen Abstand folgenden bzw. Inset des Elternelementes), was bei mir
nicht funktioniert.
Ideen?
Chris Kraft
> Leider scrollt dann die Liste der Anweisungen auch weg, was zu einem
> nervigen hin- und hergescrolle fuehrt.
> Ich hatte mir gerade gedacht, dass position:fixed die Abhilfe
> schafft ... aber dann verschwindet gleich zum Anfang auch der Anfang
> des langen Inhaltes hinter dem Anweisungs-Kasten.
Wenn dir seiteninterne Scroll-Balken nichts ausmachen kannst du es auch so
lï¿œsen:
#anweisung {
border: solid 1px red; }
#inhalt {
height: 200px;
border: solid 1px green;
overflow: scroll; }
mit
<div id="anweisung"> </div>
<div id="inhalt"> </div>
Wenn du noch ein bisschen mit display: table; experimentierst, kannst du
sicher auch die ganze Seite auf die Fensterhï¿œhen einpassen.
Gruￜ
Chris