Mein Problem ist, dass ich oben auf meiner Webseite eine Navigationsleiste eingerichtet habe, die sowohl Seitenränder als auch obere Ränder enthält. Unterhalb dieser Navigationsleiste möchte ich einen scrollbaren Container festlegen.
Lassen Sie mich sagen, dass ich Bootstrap 3.2.0 verwende, um die Site zu erstellen.
Das Problem ist, dass aufgrund der Ränder meiner Navigationsleiste der Inhalt, den ich darunter platzieren möchte, die Navigationsleiste überlappt und neben der Navigationsleiste angezeigt wird. Zur besseren Erklärung gebe ich Ihnen meinen Code und ein Live-Beispiel:
UPDATE: Ich habe etwas bemerkt, das aus meiner Sicht ein wenig das Schwierige erhöht, und es ist, dass der Körper eine Regel hat, die Scroll zu verstecken und nicht nach oben / unten scrollen zu lassen :
Ich möchte nur über den Inhalt "Hallo Welt" scrollen und natürlich, dass der gesamte Inhalt vom ersten Wort angezeigt wird: "BEGIN" bis "END" Word Scrolling.
%Vor%Ссылка (Ich habe den Bootply-Code mit den erforderlichen Einschränkungen aktualisiert).
%Vor%Wenn ich mit deinen Antworten und meiner eigenen Recherche experimentiere, habe ich erreicht, dass es für mich nah dran ist. Ich habe einen Bildlauf für das Div mit dem Inhalt unter dem Navigationsmenü und jetzt überschneidet sich der Inhalt nicht.
Das Problem ist, dass ich auch eine feste Fußzeile auf der Seite habe, wenn ich die Größe des Fensters ändere, ist die Schriftrolle nicht vollständig sichtbar und ich kann das Ende der Liste nicht erreichen, da sie von der Fußzeile überlagert wird Lass mich das Ende der Schriftrolle sehen, wenn ich die Fußzeile entferne, ist dies offensichtlich sichtbar.
Aber ich muss meinen Bildlauf so anpassen, dass er am unteren Rand des oberen Navigationsmenüs beginnt und am oberen Rand meiner Fußzeile endet, wie Sie im Beispiel sehen können. Das Problem tritt auf, wenn Sie die Größe des Browsers ändern.
Ich glaube, ich suche nach etwas ähnlichem für meinen Container, bitte sehen Sie sich den folgenden Link an:
Inhalt mit 100% zwischen Kopf- und Fußzeile
Und hier ist mein Code:
HTML:
%Vor%CSS:
%Vor%Ok in Bezug auf das Update 2, das Problem war so einfach, es zu sortieren, vielleicht habe ich es nicht gesehen. Im Grunde habe ich auf die gleiche Weise ein Padding oben auf dem Body hinzugefügt, um meinen Hauptcontainer unterhalb des oberen Navigationsmenüs zu platzieren. Ich muss genau dasselbe tun, aber mit dem unteren Padding des Body, um meinen Hauptcontainer über der unteren Navigation zu setzen Menü.
Außerdem setze ich die Höhe für meinen Hauptcontainer auf 100%, so dass es sich entlang des gesamten div-Bereichs ausdehnt.
Hier ist die Lösung:
HTML:
%Vor%CSS:
%Vor%Und für mich ist das die Lösung, nach der ich gesucht habe.
Ich mag es wirklich nicht, Elemente hinzuzufügen, die nur dazu da sind, Inhalte herumzuschubsen. Genau dafür ist die Positionierung gedacht. Der beste Weg, dies zu tun, ist mit dem Hinzufügen von Padding oben auf Ihrem Körper, wie @davidg in seiner Antwort angegeben. Um die Navigationsleiste in Position zu bringen, verwenden Sie keine Ränder. Verwenden Sie stattdessen die Eigenschaften top, left und right. Die Klasse "navbar-fixed-top" legt die Position bereits auf "fixed" fest, sodass Sie keinen Positionseigenschaftswert angeben müssen. Ich habe auch die container-fluid-Klasse zu Ihrem div hinzugefügt (so dass Sie etwas Füllung darin finden) und eine benutzerdefinierte Klasse scrollbar, um die Überlaufeigenschaft einzustellen.
CSS:
%Vor%HTML:
%Vor%Aus der Bootstrap-Dokumentation :
Körperpolsterung erforderlich Die feste Navigationsleiste überlagert Ihren anderen Inhalt, es sei denn, Sie fügen oben im & lt; body & gt; -Träger eine Füllung hinzu. Probieren Sie Ihre eigenen Werte aus oder verwenden Sie unser Snippet unten. Tipp: Standardmäßig ist die Navigationsleiste 50 Pixel hoch.
Füge einfach deinen Body Padding hinzu:
%Vor%Wenn Sie nicht möchten, dass Ihr Körper hinter der Navigationsleiste blättert, ändern Sie Ihr CSS so, dass Padding statt Rand verwendet wird:
%Vor%Sie sollten das scrollende div mit einem festen div davor verschieben:
%Vor%Und html:
%Vor%BEARBEITEN
Wenn Sie auf dem div (nicht auf der Seite) scrollen möchten, fügen Sie die Klasse "scroll" zu Ihrem scrollenden div hinzu und aktualisieren Sie css mit:
%Vor%EDIT 2 (Fußzeile)
Wenn Sie eine Fußzeile möchten, ist die Strategie die gleiche, legen Sie ein festes Div in bottom:0 . Auch hier funktioniert es nur, wenn Sie den Divisoren vor und nach der Bildlaufleiste einen Hintergrund hinzufügen.
Ich habe die Paddigns der Bildlaufleiste angepasst, um das letzte Element sichtbar zu machen.
%Vor%Sie können die folgenden Codes ausprobieren:
HTML-Code:
%Vor%CSS-Code:
%Vor%Tags und Links html css css3 twitter-bootstrap twitter-bootstrap-3