Dies ist ein Ansatz:
%Vor%Der wideContent-Teil passt sich an die Breite des Fensters an.
Ich habe eine Seite, die eine dynamisch generierte Tabelle enthält. Die Anzahl der Spalten dieser Tabelle und die Breite ihres Inhalts werden bei der Seitengenerierungszeit bestimmt, können jedoch so groß sein, dass die Tabelle die Breite des Fensters überschreitet.
In diesem Fall wird die Breite des body-Elements nicht erweitert, um den Inhalt zu enthalten, sondern ist auf die Breite des Fensters beschränkt. Daher haben alle anderen untergeordneten Elemente (mit Ausnahme der Tabelle) auch eine maximale Breite, die der Breite des Fensters entspricht:
%Vor%Dies bedeutet, dass beim horizontalen Bildlauf die anderen Elemente auf Blockebene vorzeitig angehalten werden (ihre Hintergrundfarben werden nicht erweitert, wodurch das Aussehen der Seite beeinträchtigt wird).
Hier ist eine jsFiddle, die das Problem zeigt . Beachten Sie, dass der gelbe Block im Ergebnisfenster nach rechts erweitert wird, aber die braunen, weißen und blauen Blöcke nicht.
Ich suche nach einer reinen CSS-Methode zur Lösung dieses Problems.
Am nächsten kommt ich, ohne die Dokumentstruktur überhaupt zu verändern:
%Vor%"min-content" wird jedoch von IE überhaupt nicht unterstützt. Hat jemand eine browserübergreifende, reine CSS-Lösung für dieses Problem?
Der Vollständigkeit halber (falls die Leute das jsFiddle nicht sehen können), hier ist ein Code, der das Problem anzeigt:
%Vor%Dies ist keine Lösung für genau die Frage, die Sie gestellt haben, aber eine ordentliche Option wäre das Hinzufügen von Überlauf: auto zu #main, so dass es intern blättern kann, ohne das Layout zu unterbrechen.
%Vor%Demo: Ссылка
Dies ist ein Ansatz:
%Vor%Der wideContent-Teil passt sich an die Breite des Fensters an.
Ich habe eine Seite, die eine dynamisch generierte Tabelle enthält. Die Anzahl der Spalten dieser Tabelle und die Breite ihres Inhalts werden bei der Seitengenerierungszeit bestimmt, können jedoch so groß sein, dass die Tabelle die Breite des Fensters überschreitet.
In diesem Fall wird die Breite des body-Elements nicht erweitert, um den Inhalt zu enthalten, sondern ist auf die Breite des Fensters beschränkt. Daher haben alle anderen untergeordneten Elemente (mit Ausnahme der Tabelle) auch eine maximale Breite, die der Breite des Fensters entspricht:
%Vor%Dies bedeutet, dass beim horizontalen Bildlauf die anderen Elemente auf Blockebene vorzeitig angehalten werden (ihre Hintergrundfarben werden nicht erweitert, wodurch das Aussehen der Seite beeinträchtigt wird).
Hier ist eine jsFiddle, die das Problem zeigt . Beachten Sie, dass der gelbe Block im Ergebnisfenster nach rechts erweitert wird, aber die braunen, weißen und blauen Blöcke nicht.
Ich suche nach einer reinen CSS-Methode zur Lösung dieses Problems.
Am nächsten kommt ich, ohne die Dokumentstruktur überhaupt zu verändern:
%Vor%"min-content" wird jedoch von IE überhaupt nicht unterstützt. Hat jemand eine browserübergreifende, reine CSS-Lösung für dieses Problem?
Der Vollständigkeit halber (falls die Leute das jsFiddle nicht sehen können), hier ist ein Code, der das Problem anzeigt:
%Vor%Ich habe gerade folgendes CSS hinzugefügt. Und es funktioniert.
%Vor%Nach weiterem Herumspielen habe ich eine Lösung gefunden, die das Hinzufügen eines zusätzlichen Umhüllungselements zu den drei Abschnittselementen beinhaltet. Dies kann für andere mit dem gleichen Problem nützlich sein, jedoch werde ich dies (noch) nicht als akzeptiert markieren, da ich immer noch darauf erpicht bin zu sehen, ob es eine CSS-Lösung gibt, die das HTML überhaupt nicht verändert.
Wie auch immer, diese Lösung besteht darin, die Elemente %code% , %code% und %code% in ein neues Element %code% einzufügen und das folgende CSS hinzuzufügen:
%Vor%Scheint in Chrome, FF und IE zu funktionieren. Demo hier .
Dies ist keine Lösung für genau die Frage, die Sie gestellt haben, aber eine ordentliche Option wäre das Hinzufügen von Überlauf: auto zu #main, so dass es intern blättern kann, ohne das Layout zu unterbrechen.
%Vor%Demo: Ссылка
Nach weiterem Herumspielen habe ich eine Lösung gefunden, die das Hinzufügen eines zusätzlichen Umhüllungselements zu den drei Abschnittselementen beinhaltet. Dies kann für andere mit dem gleichen Problem nützlich sein, jedoch werde ich dies (noch) nicht als akzeptiert markieren, da ich immer noch darauf erpicht bin zu sehen, ob es eine CSS-Lösung gibt, die das HTML überhaupt nicht verändert.
Wie auch immer, diese Lösung besteht darin, die Elemente header , footer und div#main in ein neues Element div.layout-row einzufügen und das folgende CSS hinzuzufügen:
Scheint in Chrome, FF und IE zu funktionieren. Demo hier .
Tags und Links html css horizontal-scrolling