Webdesign: Automatische Höhenanpassung von DIV-Containern durch Übernahme der Höhe des benachbarten DIV-Containers?

...komplette Frage anzeigen

2 Antworten

Tabellen ausschließlich zum Darstellen tabellarischer Daten verwenden, aber nicht zum Layouten deiner Website. Daher bitte die Lösung von Dory1 ignorieren. 

divB ist ein Bild-Container. #divA und #divC sollen beide die Höhe von #divB übernehmen, ohne dass eine "fixe" Höhe definiert ist.

Kurz und knapp - freunde dich mit dem Flexbox-Model an. Damit ist so etwas schnell mit wenigen Zeilen Code umgesetzt. Wohl gemerkt mit CSS!

<div class="boxes">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</div>
.boxes{
  max-width: 900px;
  display: flex;
  margin: 0 auto;
}

.boxes div {flex: 1;}

.box-1 {background-color: red;}
.box-2{background-color: yellow;}
.box-3 {background-color: green;}

»All the magic« in der Display-Eigenschaft flex steckt. ;) Dem Eltern-Element lediglich ein display: flex; geben und den Kind-Elementen ein flex: 1; verpassen. Sobald ein Kind-Element größer als seine Geschwister, diese automatisch mit wachsen. 

LG medmonk 

Zur Not kannst du eine eine Tabelle verwenden. 

http://codepen.io/anon/pen/ObPjGw

So richtig funktioniert das aber nicht.
Weder durch "display:table-row;display:table-column; noch durch display:table-cell;".

Mit welchen Attributen sollte das denn funktionieren?

Mit echten Tabellen arbeitet man heut ja nicht mehr, da sie sich kaum für unterschiedliche Bildschirmgrößen anpassen lassen.

0
@RhoMalV

Solange es nur darum geht, dass die einzelnen Zellen ab einer bestimmten Bildschirmbreite untereinander angeordnet werden - das bekommst du auch mit 'ner Tabelle hin (s. Link).

0

Was möchtest Du wissen?