nicht angemeldet
Volle Breite für <div>, auch beim Scrollen
Hallo!
Ich schlage mich mit folgendem Problem herum: Ich habe eine ganz einfache Seite, die aus verschachtelten (oder nacheinandergeschalteten: egal) DIVs besteht.
Das oberste DIV soll die volle Browserbreite einnehmen und eine bestimmte Hintergrundfarbe haben. Es hat wenig Inhalt (Navigation). Die Breite des nachfolgenden DIVS, das den eigentlichen Inhalt umschließt, hat eine nicht vorhersagbare Breite. Es könnte sein, dass es extrem breit wird, weil eine große Tabelle darin auftaucht.
In diesem Fall ensteht unten im Browser ein horizontaler Scrollbalken. Gut so. Aber:
Beim horizontalen Scrollen wandert die ehemalige rechte Außengrenze des obersten DIVs mit nach links. Rechts davon ist die Hintergrundfarbe des BODYs zu sehen. Wie sorge ich dafür, dass sich das Navigations-DIV auch beim Scrollen über die gesamte Browser-Breite erstreckt?
Der Inhalt des DIVs soll also mitscrollen, aber die Hintergrundfarbe soll bleiben.
Ich möchte das ausschließlich mit CSS und ohne blinde Tabellen lösen.
Beispiel:
HTML:
<body>
<div class="aussen">
Irgendein Text
<div class="innen">
Ganz viel Text. Ganz viel Text...
</div>
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
background-color: #AAAA00;
}
div.aussen {
margin: 0px;
padding: 40px 0px 0px 0px;
background-color: #AA00AA;
}
div.innen {
margin: 0px;
padding: 40px;
width: 2000px;
background-color: #0000AA;
}
Das mit "width: 2000px;" dient nur als Hervorhebung. Die steht normalerweise auf "auto" und richtet sich nach dem Inhalt.
Vielen Dank für jede Hilfe!
Jan.
-
DIV soll also mitscrollen, aber die Hintergrundfarbe soll bleiben.
Ich möchte das ausschließlich mit CSS und ohne blinde Tabellen lösen.Manchmal muss man seine Probleme einfach nur loswerden, und schon geht's einem besser. Also ich habe jetzt selber eine Lösung gefunden. Die funktioniert zwar im IE noch nicht, aber das wird sich ja irgendwann mal ändern. Mozilla/Opera/Konqueror machen es richtig.
Falls es jemanden interessiert:
HTML:
<body>
<div class="table">
<div class="tr">
<div class="td">
<div class="aussen">
Irgendein Text
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="innen">
Ganz viel Text. Ganz viel Text... </div>
</div>
</div>
</div>
</body>CSS:
body {
margin: 0px;
padding: 0px;
background-color: #AAAA00;
}div.table {
display: table;
width: 100%;
}div.tr {
display: table-row;
width: 100%;
}div.td {
display: table-cell;
width: 100%;
}div.aussen {
margin: 0px;
padding: 20px;
background-color: #AA00AA;
}div.innen {
margin: 0px;
padding: 20px;
width: 2000px;
background-color: #0000AA;
}Okay, das ist ziemlich nah dran an blinden Tabellen, aber immerhin nur per CSS.
-
Hi,
HTML:
<body>
<div class="table">
<div class="tr">
<div class="td">
<div class="aussen">
Irgendein Text
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="innen">
Ganz viel Text. Ganz viel Text... </div>
</div>
</div>
</div>
</body>CSS:
body {
margin: 0px;
padding: 0px;
background-color: #AAAA00;
}div.table {
display: table;
width: 100%;
}div.tr {
display: table-row;
width: 100%;
}div.td {
display: table-cell;
width: 100%;
}div.aussen {
margin: 0px;
padding: 20px;
background-color: #AA00AA;
}div.innen {
margin: 0px;
padding: 20px;
width: 2000px;
background-color: #0000AA;
}Okay, das ist ziemlich nah dran an blinden Tabellen, aber immerhin nur per CSS.
Ziemlicher div-Wust.
Was ist der Unterschied zuCSS:
body {
margin: 0px;
padding: 0px;
width:2000px;
background-color: #AA0;
}
div {
margin: 0px;
padding: 20px;
}
.innen { background-color: #00A; }
.aussen { background-color: #A0A; }HTML:
<body>
<div class="aussen">
Irgendein Text
</div>
<div class="innen">
Ganz viel Text. Ganz viel Text...
</div>
</body>cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Ziemlicher div-Wust.
Was ist der Unterschied zuDas mit den 2000px diente ja nur zur Verdeutlichung des Problems. Die Breite des Bodys und der DIVs sollen nicht vorgegeben werden. Es lässt sich nicht vorhersagen, welches DIV am breitesten wird und wie breit es wird.
In deinem Vorschlag muss ich den Body so breit machen wie das breiteste DIV eventuell mal irgendwann werden könnte. Dann habe ich auf allen Seiten einen Scrollbalken, auch wenn das der Inhalt gar nicht verlangt. Und wenn wider Erwarten der Inhalt des zweiten DIVs mal 2400px in Anspruch nehmen sollte, dann bin ich wieder am Anfang.
Gruß,
Jan.
-
-