Höhe des Inneren Div soll immer 50% des äußeren Div betragen
Hallo,
ich habe einen äußeren Div-Container, welcher nach links floatet und folgenden css-Code besitzt: Code:
.image-container-grid { Code:
.text-content-grid Danke im voraus! Viele Grüße |
Was genau möchtest du erreichen? Ich glaube, dass das, was du erreichen möchtest, einfacher und ohne diese Berechnungen zu realisieren ist.
|
ich möchte erreichen, dass der innere div container (.text-content-grid) auf allen Bildschirmgrößen immer genau 50% der Höhe des äußeren Div-containers entspricht. Aktuell hat er eine absolute Höhe von 190px... Dafür suche ich eine andere Lösung. Weißt Du was ich möchte?
|
Hallo
Du hast den Sinn von HTML / CSS noch nicht verstanden. HTML und CSS sind dafür ausgelegt Informationen zu übermitteln. Nicht aber um unsinnige Layouts zu erstellen, die nichts mit der Informationsübermittlung zu tun haben. Solche Layoutwünsche können häufig nur mit Tricks umgesetzt werden. Grundsätzlich richtet sich die Höhe von Containern nach ihrem Inhalt. Du willst genau das Gegenteil erreichen, nämlich dass sich die Höhe eines Containers nicht nach seinem Inhalt, sondern nach den ihn umgebenden Container richtet. Da so ein Konstrukt zur Informationsübermittlung nicht notwendig ist gibt es dafür in HTML und CSS keine direkte Lösung. Du musst also basteln. Zunächst musst du dafür sorgen, dass die Container im Dokumentenfluß bleiben. Wenn du dem inneren Container position: absolute (oder auch ein float) verpasst wird er aus dem Dokumentenfluß herausgehoben. Folge: Der äußere und der innere Container können nicht mehr aufeinander reagieren. Dann benötigt der äußere Container eine Höhe, nach der der innere sich richten kann. Erforderlichenfalls müssen auch weitere umgebende Container bis html und body Höhenangaben (height, min-height) bekommen. Sofern diese Vorgaben erfüllt sind kann der innere Container mit Prozentangaben für seine Höhe auf den umgebenden Container reagieren. In deinem Beispiel height: 50%; Die horizontrale Zentrierung erfolgt dann mittels Flexbox: align-items: center; Gruss MrMurphy |
Danke MrMurphy fürs ausformulieren dessen, was ich mit meiner Frage bezwecken wollte. Um diese Frage zu beantworten:
Zitat:
|
Alle Zeitangaben in WEZ +2. Es ist jetzt 09:59 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023