nicht angemeldet
Größe (width) abhängig von Großelternelement (grandparent)
Hallo,
vielleicht hat jemand eine Lösung für das folgende (scheinbar) einfache Problem:
Ich habe drei verschachtelte divs, von denen das erste (grün) sich am viewport orientiert und das zweite (orange/gelb) eine fixe über den viewport hinausgehende Breite hat. Das dritte (blau) hat 100% Breite und richtet sich dabei korrekterweise nach dem zweiten, überbreiten div.
Frage: Wie kann ich erreichen, dass das dritte div (blau) seine Breite am ersten div (grün) ausrichtet und also in diesem Beispiel vollständig zu sehen ist?
<div style="width:80%;overflow:scroll; padding:10px;border:1px solid green;background-color:lightgreen">
01 GRÜN
<div style="width:2800px; padding:10px;border:1px solid orange;background-color:yellow">
02 ORANGE
<div style="width:100%; padding:10px;border:1px solid blue;background-color:lightblue">
03 BLAU
</div>
</div>
</div>
(Kleine Unterschiede zwischen den Browsern sind erstmal irrelevant.)
Dank und Gruß
payx
-
Frage: Wie kann ich erreichen, dass das dritte div (blau) seine Breite am ersten div (grün) ausrichtet und also in diesem Beispiel vollständig zu sehen ist?
gegenfrage - warum muss das so sein, versuchst du einen hintergrund darzustellen, der eine feste breite hat oder ähnliches und bist dir nicht bewusst, dass man das offest des hintergrundes angeben kann?
-
Hallo suit,
danke für Deine Antwort.
Frage: Wie kann ich erreichen, dass das dritte div (blau) seine Breite am ersten div (grün) ausrichtet und also in diesem Beispiel vollständig zu sehen ist?
gegenfrage - warum muss das so sein, versuchst du einen hintergrund darzustellen, der eine feste breite hat oder ähnliches und bist dir nicht bewusst, dass man das offest des hintergrundes angeben kann?
Es geht nicht um die Darstellung eines Hintergrunds. (Die Hintergründe und Rahmen im Beispiel dienen nur der Visualisierung.) Das Gebilde mit den drei divs ist ein Teil eines größeren Gesamtlayouts, der als ganzer (s.o. "grün") relativ zu anderen Elementen positioniert wird und eine bestimmte Breite hat.
Das zweite div (orange) erhält seine Ausmaße in Abhängigkeit von einer dynamisch erzeugten Tabelle, die über den sichtbaren Bereich hinausgehen kann (im Beispiel nicht enthalten bzw. ersetzt durch feste width). Es enthält aber auch Elemente (blau), die idealer Weise ihre Breite nach dem Großelternelement (grün) richten sollen, z.B. eine Textbox unter der Tabelle, die bei den gegenwärtigen Einstellungen entsprechend der Tabelle in die Breite gezogen wird (was den Text schlecht lesbar macht). Dieses div (orange) soll als ganzes scrollierbar sein, sodass die normalbreiten Elemente (Textbox usw.) ggf. der Tabelle weichen.
Und damit sind wir wieder bei meiner Eingangsfrage.
Auf die Idee, dem blauen div einfach eine feste Breite zu geben, in der eine Textbox gut lesbar ist, bin ich übrigens schon gekommen. Die Frage ist aber eben, ob es einen Weg gibt, die Breite vom Großelternelement zu erben.
Dank und Gruß
payx-
Das zweite div (orange) erhält seine Ausmaße in Abhängigkeit von einer dynamisch erzeugten Tabelle, die über den sichtbaren Bereich hinausgehen kann (im Beispiel nicht enthalten bzw. ersetzt durch feste width). Es enthält aber auch Elemente (blau), die idealer Weise ihre Breite nach dem Großelternelement (grün) richten sollen, z.B. eine Textbox unter der Tabelle, die bei den gegenwärtigen Einstellungen entsprechend der Tabelle in die Breite gezogen wird (was den Text schlecht lesbar macht). Dieses div (orange) soll als ganzes scrollierbar sein, sodass die normalbreiten Elemente (Textbox usw.) ggf. der Tabelle weichen.
ich hab kein wort verstanden ;) irgendwie kann ich das heute nicht visualisieren, sorry
Auf die Idee, dem blauen div einfach eine feste Breite zu geben, in der eine Textbox gut lesbar ist, bin ich übrigens schon gekommen. Die Frage ist aber eben, ob es einen Weg gibt, die Breite vom Großelternelement zu erben.
nicht mit css - wohl aber mit javascript
-
-