3 div-Container nebeneinander, vertical scroll, Navigation fixed
0 
Jo
3 div-Container nebeneinander, vertical scroll, Navigation fixed
Matthias ApselLiebe alle,
das Layout meiner Seite, für Browser die nicht auf touch-Geräten laufen und eine horizontale Auflösung > 900 Pixel haben, sollte folgendermaßen aussehen:
|----------------navigation--------------------------|
|____________________________________________________|
| | | | | | |
|--pre-content--|-------content-----|--post-content--|
| | s1 | s2 | s3 | sX | |
| | | | | | |
|_______________|____|____|____|____|________________|
Meine Frage lautet, welchen Ansatz würdet ihr für die Realisierung meines Vorhabens in CSS verwenden? Das Problem, bei meinem derzeitigen Ansatz ist, dass die variable Breite vom content-Div nicht berücksichtigt wird (siehe Codesample).
Nur der Vollständigkeit halber, mein Codesample, das nicht so funktioniert, wie ich will, da es die variable Breite des content-Div nicht berücksichtigt:
<html>
<head>
<style>
body{
margin: 0px;
padding: 0px;
}
#navigation {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 67px;
background-color: red;
}
#pre-content{
position: absolute;
left: 0px;
top: 67px;
width: 100%;
bottom: 0px;
background-color: pink;
}
#content {
position: absolute;
top: 67px;
bottom: 0px;
left: 100%;
width: 100%;
background-color: green;
}
#post-content{
position: absolute;
width:100%;
bottom: 0px;
top: 67px;
left: 200%;
background-color: lightblue;
}
.sx{
background-color: orange;
height: 100%;
float: left;
width: 350px;
margin-right: 2em;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
</head>
<body>
<div id="navigation">navigation</div>
<div id="pre-content">pre-content</div>
<div id="content">
<div class="sx">s1</div>
<div class="sx">s2</div>
<div class="sx">s3</div>
<div class="sx">s4</div>
<div class="sx">s5</div>
<div class="sx">s6</div>
</div>
<div id="post-content">post-content</div>
</body>
</html>
Leidensweg und einige Erklärungen:
Es handelt sich um eine horizontal scrollende Seite. Deshalb ist es wichtig, dass navigation-Höhe + content-Höhe = 100% des Browser-Fensters einnehmen. Die Höhe der Navigationsleiste beträgt 67px.
- Die Breite von pre-content und post-content beträgt 100% der Fensterbreite.
- Die Breite von content ist variabel und hängt von dessem Inhalt ab.
- s1, s2, sX sind Spalten, die vertikal gescrollt werden können. Die Anzahl der Spalten ist variabel und somit auch die Breite von content.
CSS Navigationsleiste:
#navigation {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 67px;
background-color: red;
}
Das erste Problem, auf das ich bei der Umsetzung gestoßen bin war, dass pre-content, content und post-content die verbleibende Fensterhöhe ausfüllen. Dafür habe ich einen kleinen Trick angewandt. Ich habe alle diese content-Felder auf position: absolute gesetzt; den Abstand oben auf 67px (top: 67px), was der Höhe der Navigationsleiste entspricht; und den Abstand unten auf 0 (bottom: 0px). Alle content-Fenster erhielten dabei die Breite von 100%.
Mit float, war es mir nicht möglich das selbe Ergebnis zu erzielen, da es bei einer Lösung mit float zu Überlappungen kommt. Die Navigationsleiste überlappt meine Content-Felder. Das führt dazu, dass die vertikalen Scrollbalken von s1, s2, sX überlappt werden. Es ist also wichtig, dass es nicht zu Überlappungen kommt. Eine Korrektur der 67px der Navigationsleiste mit padding kommt auch nicht in Frage, da hier ebenfalls die scrollbalken durch die Navigationsleiste verdeckt werden.
CSS pre-content:
#pre-content{
position: absolute;
left: 0px;
top: 67px;
width: 100%;
bottom: 0px;
background-color: pink;
}
Dadurch, dass ich aber position: absolute verwende ist es mir nicht mehr möglich, die Breite des content-Div variabel zu gestalten.
Ich habe auch schon versucht mit display:table und display: inline-block zu arbeiten, jedoch war keines meiner Ergebnisse zufriedenstellend. Wahrscheinlich deshalb, weil ich da nach mehreren Tagen probieren die Geduld verloren habe :) und so hoffe ich nun hier Hilfe zu finden.
Besten Dank im Voraus.
andres
-
Servus,
Ich meine dein Problem recht einfach lösen zu können.
Versuch mal um deine pre-content, content, post-content<div>einen übergeordneten Haupt<div>zu legen der die breite 100% hat und Abstand top 67px mit overflow-x: auto. Dann änderst du noch die top Abstände von den 3 content divs auf 0.Ohne das ausprobiert zu haben könnte das aber ein Ansatz sein.
Obwohl ich grad nicht genau verstehe warum du weißt das 100%=900px sind und trotzdem 100% statt 900px angibst. Würde das vllt auch ändern wenn du dir da sicher bist.
Die sx
<div>die du mit float nebeneinander haben willst funktioniert nicht!
Da float den Absolut positionierten<div>"übergeht und sich am nächsten fixed<div>orientiert. Das Problem lässt sich auch einfach beheben in dem du sx sagst es soll eine Tabelle sein mitdisplay: table-cell.Gruß
Jo
-
Danke Jo!
Ich hab's zwar jetzt anders, als von dir vogeschlagen gelöst, aber du hast die Gedankenlawine :) ins rollen gebracht. Die Idee mit dem wrapper hab' ich übernommen.Mit
display: table-cellhab' ich's leider nicht hinbekommen, da ich die SX -<div>gerne aufheight: 100%hätte. Das hab' ich mit table-cell nicht hinbekommen. Hab das Ganze letztendlich mitdisplay: inline-block;umgesetzt.Obwohl ich grad nicht genau verstehe warum du weißt das 100%=900px sind und trotzdem 100% statt 900px angibst. Würde das vllt auch ändern wenn du dir da sicher bist.
Dieses Layout ist nur für Ansichten >900px Breite gedacht. Ich verwende CSS-Media-Queries.
Folgendes Beispiel hab ich in allen gängigen Browsern getestet und es funktioniert _fast_ wie gewünscht. Ich kann mir noch nicht erklären wie der vertikale Scroll-Balken im wrapper-div zustande kommt. Die Seite hat irgendwo einen vertikalen overflow von ca. 10 Pixel.
Wäre toll, wenn mir jemand erklären könnte warum?<html> <head> <style> body{ margin: 0px; padding: 0px; } #navigation { position: fixed; top: 0px; left: 0px; width: 100%; height: 67px; background-color: red; } #content-wrapper{ position: fixed; top: 67px; left: 0px; bottom: 0px; width: 100%; white-space: nowrap; overflow-y: scroll; background-color: lightgray; } #pre-content, #content, #post-content{ display: inline-block; vertical-align: top; height: 100%; } #pre-content{ width: 100%; background-color: pink; } #content { white-space: nowrap; background-color: green; } #post-content{ width: 100%; background-color: lightblue; } .sx{ display: inline-block; width: 350px; height: 100%; white-space: normal; margin-right: 4em; overflow-y: scroll; background-color: orange; } .entry{ padding: 1.8em; background-color: white; } </style> </head> <body> <div id="navigation">navigation</div> <div id="content-wrapper"> <div id="pre-content">pre-content</div> <div id="content"> <div class="sx"> <div class="entry">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. </div> </div> <div class="sx">s2</div> <div class="sx">s3</div> <div class="sx">s4</div> <div class="sx">s5</div> <div class="sx">s6</div> </div> <div id="post-content">post-content</div> </div> </body> </html>lg
-
Die Seite hat irgendwo einen vertikalen overflow von ca. 10 Pixel.
Wäre toll, wenn mir jemand erklären könnte warum?Das ist ja interessant, man muss die den
display: inline-block-Elementen zusätzlichfont-size: 0pxzuweisen damit der vertikale Rand verschwindet. Warum das so ist weiß ich aber immer noch nicht.-
Om nah hoo pez nyeetz, andres!
Du solltest keine div-Suppe kochen, sondern semantisch passende Elemente verwenden. Die Einheit Pixel ist keine gute Wahl, da so ein Pixel überall eine andere Größe hat.
Die Seite hat irgendwo einen vertikalen overflow von ca. 10 Pixel.
Wäre toll, wenn mir jemand erklären könnte warum?Das ist ja interessant, man muss die den
display: inline-block-Elementen zusätzlichfont-size: 0pxzuweisen damit der vertikale Rand verschwindet. Warum das so ist weiß ich aber immer noch nicht.Das sind vermutlich die Zeilenumbrüche im Quelltext, der sogenannte whitespace. Besser als die Schriftgröße auf Null zu setzen - die Angabe
0wäre ausreichend, da0pxdasselbe ist wie0km- ist imho, die white-space-Eigenschaft zu verwenden, da Änderungen in der Schriftgröße Auswirkungen auf Größenangaben in em haben.Matthias
-
-
-
