Body-Scrollbalken nur bei bestimmten Containern erzeugen.

Unregistriert

Guten Tag,

ich suche ein Lösung für folgendes Problem:

Ich habe in meinem html-body zwei mittig-ausgerichtete Container liegen:

Hierbei ist die #box1 1024px breit und #box2 960px breit. Wenn das Browserfenster kleiner als 1024px breit wird erzeugt body automatisch einen horizontales Scrollbalken, da hier nun #box1 überlappt. Ich möchte aber gerne über CSS definieren, dass hier kein Scollbalken erscheinen soll, allerdings wohl, wenn der #box2 mit 960px überlappt – wenn das Fenster also kleiner als 960px wird.

Ich habe schon probiert body in CSS mit "overflow-x: hidden" zu versehen, aber dann wird nie eine horizontale Scollleiste erzeugt, was nur zu Problemen mit der Inhaltsdarstellung führt.

Kann ich irgendwie für #box1 definieren, dass der body diesen Container ignorieren soll, wenn er Ihn überschneidet oder kann ich festlegen, dass erst bei einer Broweserfenstergröße von 960px und kleiner ein horizontaler Scrollbalken entsteht?

Für Hilfe wäre ich sehr dankbar!

Julian Rüßmann

Also du willst, dass nen scroll balken im container ist?!

HTML

<div width="100" height="100">
1<br> 
2<br> 
3<br> 
4<br> 
5<br> 
6<br> 
7<br> 
8<br> 
9<br> 
10<br> 
11<br> 
12<br> 
13<br> 
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
</div>

Alles anzeigen

habe jetzt nicht getestet und weis nicht ob stimmt

Julian Rüßmann

nee hier habe was gefunden

HTML

.scroll {
background: #ff8e00;
height: 150px;
overflow: scroll;
width: 200px;
border: 1px solid #000;
padding: 10px;
}


<div class="scroll">
Darstellung bei zu viel Inhalt
Bei zu viel Inhalt reicht der Platz nicht aus.
Die meisten Browser bieten für diesen Fall eine Scrollbar an, mit der sich der Inhalt scrollen lässt.
</div>

Alles anzeigen

Unregistriert

danke für die antwort, aber nein, ihr habt mich falsch verstanden. nicht die container sollen einen scrollbalken haben. das browserfenster hat in der regel scrollbalken vertikal, wenn der inhalt nach unten läuft und horizontale balken, wenn der inhalt nach rechts über die fensterränder hinausläuft. wenn mein container 1024px breit ist und das browserfenster kleiner als 1024px breit wird, wird automatisch ein horizontaler scrollbalken im browserfenster erzeugt. und das möchte ich nicht. ich weiß, ich könnte <body> mit "overflow-x: hidden;" versehen, aber dann kommt nie ein scrollbalken auf horizontaler ebene. ich habe aber einen zweiten container mit inhalt, der 960px breit ist und wenn dieser angeschnitten wird, weil das browserfenster vielleicht schon schmaler wird, dann soll ab hier ein scrollbalken im browser-fenster unten erscheinen. wie kann ich sowas definieren?

threadi

Du willst also eine weitere Box nur sichtbar haben, wenn das Browserfenster auch breit genug dafür ist? Das kannst Du mit JavaScript erreichen indem Du die Größe des Viewports prüfst und entsprechend diesen "zweiten Container" aus- oder einblendest.

Grevas

Zitat von threadi

Du willst also eine weitere Box nur sichtbar haben, wenn das Browserfenster auch breit genug dafür ist? Das kannst Du mit JavaScript erreichen indem Du die Größe des Viewports prüfst und entsprechend diesen "zweiten Container" aus- oder einblendest.

Und wenn dir alt-browser egal sind, ist @media-query wohl was für dich. Google kannst du benutzen, denke ich

Tags