nicht angemeldet
CSS: Div mit fester Größe aber relativen Position
0 
Matthias Apsel
0
CSS: Div mit fester Größe aber relativen Position
Hallo
Ich einen Container (als div umgesetzt), der fest auf meiner Seite platziert ist. Dies habe ich mit
position: fixed;
gelöst. Funktioniert auch super.
Nun möchte ich innerhalb dieses divs mehrere weitere SubContainer haben, deren Göße ich relativ zum HaupContainer angeben kann. Gleichzeitig sollen diese Container aber automatisch nebeneinander positioniert werden. Wenn es mehr SubContainer sind als in den HauptContainer „reinpassen“ sollen sie über horizontales scrollen des HauptContainers erreicht werden können.
Wenn ich die Subcontainer mit
position: absolute;
height: 80%;
width: 30%;
skaliere, funktioniert das Skalieren gut, sie werden nur alle übereinander geklatscht und nicht nebeneinander.
Wenn ich stattdessen mit
position: relative;
height: 80%;
width: 30%;
arbeite, sind sie schön positioniert, jedoch werden height und width Angaben ignoriert.
Falls wer helfen kann würde ich mich sehr freuen.
Nachdem ich jetzt schon Wochen daran herumprobiere frage ich einfach mal selbst, falls es schon eine Antwort in einem anderen Forenbeitrag geben sollte, entschuldigt und verlinkt sie bitte.
akzeptierte Antworten
CSS: Div mit fester Größe aber relativen Position
Matthias Apsel
Bewertung: keine Bewertung
-
Hallo superjojo140,
Flexbox ist dein Freund.
Bis demnächst
Matthias-
Vielen Dank!!!,
Genau das was ich gesucht habe. Wieso hab ich diese Flex-Boxen nicht selbst gefunden.....
Damit es mit dem horizontalen scrollen klappt und tatsächlich ein overflow entsteht muss man noch min-width Werte setzen.
Lg jojo
-
-
Hallo
jedoch werden height und width Angaben ignoriert.
Nein, sie werden nicht ignoriert sondern funktionieren. Aber natürlich nicht so wie du es dir erträumst, sondern wie es in den HTML-/CSS-Regeln bestimmt ist.
Du hast unter anderem bei deinen Angaben
Ich einen Container (als div umgesetzt), der fest auf meiner Seite platziert ist. ... Nun möchte ich innerhalb dieses divs mehrere weitere SubContainer haben,
die wichtige Informationen unterschlagen, das sich zwischen dem Container und den Subcontainern noch eine vollständige Tabelle (table-Element) befindet.
Mal abgesehen davon dass die Tabelle zum Layouten mißbraucht wird hat sie Nachteile und Auswirkungen auf das Layout, wenn sie keine Tabellendaten enthält.
Ein Nachteil ist, dass Tabellen ein anders Verhalten als andere Elemente an den Tag legt. Sie ist halt darauf spezialisiert, Tabellendaten in Tabellenform anzuzeigen.
Eine Auswirkung ist, dass sich die Prozent-Angaben der SubContainer auf die Tabelle beziehen und nicht auf den umgebenden Container.
Da die Tabelle nur so groß wie ihr Inhalt wird funktioniert eine height-Angabe in Prozent zwar, hat aber keine Auswirkungen. Auch ohne height Angabe füllt der SubContainer bereits die gesamte Tabellenhöhe aus. Und 100%-height sagt das gleiche: Werde so hoch wie das umgebende Element.
Vorschlag: Schmeiß die Tabelle ersatzlos raus.
Gruss
MrMurphy
-
Danke auch für diese Antwort.
Die Tabelle hatte ich nicht erwähnt, weil es mir ein bisschen peinlich war ;-)
Mir war bewusst, dass eine Lösung mit einer Tabelle sehr unschön ist. Deshalb habe ich ja hier nach etwas schönerem gesucht, und mit den Flexboxen gefunden.
-