Ich habe diese HTML-Struktur:
%Vor% Ich möchte, dass die Seite eine feste Höhe hat, die der Höhe des Bildschirms entspricht, und ich möchte auch eine vertikale Bildlaufleiste für das div scrollable_content .
Ich habe versucht, mit diesen Stilen, aber die Seite, die ich bekomme, ist größer als der Bildschirm, so dass ich zwei Bildlaufleisten erhalten:
%Vor%Wie kann ich das mit CSS3 machen?
Bearbeiten: Ich habe eine Lösung mit jQuery gefunden (siehe unten). Ich würde gerne wissen, ob dies nur mit CSS3 möglich ist?
Vielen Dank im Voraus!
Wenn Sie ein Element absolut positionieren, kommt es aus dem Fluss der Seite heraus. Bitte sieh dir diese Geige an. Beachten Sie, dass das grüne Feld zwei vertikale Bildlaufleisten anzeigt.
Um eine einzelne Bildlaufleiste zu erhalten, die nur unter der Kopfzeile angezeigt wird, müssen Sie Ihr CSS ändern. Dieses CSS funktioniert nur mit Kopfzeilen mit fester Höhe.
overflow:hidden , so dass sie nicht die Scrollbar des Hauptbrowsers auslösen Mein Vorschlag:
- Lassen Sie Javascript laufen, um die Größe des Containers div / scrollable_content div so zu ändern, dass er immer 100% der Höhe des Browsers beträgt. Wenn Personen die Größe des Browserfensters ändern, usw. maximieren, werden Ihre Höhen nicht angezeigt.
Abhängig von der Website / Anwendung können Sie dies auf einem Timer (setTimeout) oder hören Sie die Größenänderung Ereignisse des Browsers
Auschecken: jQuery - dynamische div height
oder
Aktualisierung:
Hier ist, worüber ich gesprochen habe: Ссылка
Ich habe es nur als eine Größe ändern Schaltfläche, aber Sie können sehen, wenn Sie die Größe des unteren rechten Fensters ändern, und klicken Sie auf die Schaltfläche, es wird die Größe dieses div für Sie die Höhe der enthaltenen div.
Sie können dies auch erweitern, indem Sie die Browserhöhe erhalten (dieses Beispiel enthält die Breite). Ich habe dieses Skript nicht geschrieben, es ist das gleiche, das im ganzen Internet gespuckt wurde, ich kopiere es einfach:
%Vor%