Ich habe ein Elternteil div (main) mit dem horizontalen Überlauf auf auto. Ich habe dann ein Child-Element (Spalten), das alle meine Spalteneigenschaften enthält. Das Problem ist, dass sobald der Inhalt über das Bildfenster hinausgeht, ich nicht mehr die Ränder oder den Abstand der rechten Hand steuern kann, da die Spalte nur so weit wie das Ansichtsfenster zu gehen scheint. Wenn ich beispielsweise eine Hintergrundfarbe auf "Spalten" lege, geht der Hintergrund nur bis zum Rand des Ansichtsfensters, obwohl der Inhalt weiter scrollt.
%Vor%Hier ist ein Beispiel: Ссылка
Basierend auf Ihren Kommentaren, hier ist neu die Geige , die Ihrer Meinung nach Ihren Wünschen entspricht. Es fügt ein zusätzliches div wrapping .columns I mit der Bezeichnung .scroller und das folgende css:
Ich benutze ein Pseudo-Element in .main , um den Hintergrund für .columns auf die gewünschte Höhe zu setzen, dann benutze ich ein anderes Pseudo-Element in der letzten p , um das Rendern zu erzwingen 20px der Spalte. Es sollte funktionieren, egal wie lange oder welchen Teil es dauert, und bei height: 1px und margin-top: -1px sollte es keine neue Spalte erzeugen, wenn es direkt am Ende einer Textspalte steht.
Um die background zu übertragen, müssen Sie einige CSS ändern, nämlich:
Dies liegt daran, dass der .column Hintergrund durch die 100% Breite auf .main begrenzt ist, die die horizontale Bildlaufleiste in Ihrem ursprünglichen Code steuert. Wenn Sie .main rein verborgen machen und dann overflow-x: auto auf .columns setzen, wird der Bildlauf nun von% div% co_de gesteuert und erlaubt das Anzeigen seiner .columns .
Um das Fehlen der Polsterung auf der rechten Seite zu beheben, konnte ich nur folgendes hinzufügen:
%Vor% Dies setzt einen rechten Rand für das letzte background -Element der unmittelbaren Kinder von p , das dann das Aussehen gab, von dem ich annehme, dass Sie es anstreben.
Hier ist die Geige modifiziert (nur in Firefox getestet).
Ich habe bessere Ergebnisse erzielt, indem ich Ihre Spalten css wie folgt aufgeteilt habe:
%Vor%