Overlay trotz position: relative

freeek · 3. August 2015, 18:24

Hi,

ich bin gerade auf ein Problem gestoßen, welches ich nicht gelöst bekomme.
Und zwar habe ich folgenden (vereinfachten) Code:

HTML-Quellcode

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

und dazu diese CSS (ebenfalls gekürzt):

CSS-Quellcode

.container {
position: fixed;
bottom: 0;
right: 0;
display: flex;
height: 50px;
overflow: visible;
}
.item {
height: 400px;
}

Alles anzeigen

Normalerweise würde ich .item ein position:absolute geben und fertig. Allerdings würden die DIVs dann alle übereinander liegen, was mir nichts hilft.
Nun meine Frage: gibt es eine Möglichkeit .item in voller Größe anzuzeigen, ohne ein zusätzliches DIV zwischenzuschalten?

Drasko · 4. August 2015, 19:17

Ich verstehe dein Problem nicht. Sollen die Items den maximalen Platz ausnutzen?

Dann mach Folgendes:

CSS-Quellcode

.container {
display:table;
}
.item {
display: table-cell;
}

jsfiddle.net/b0cfk9nk/

freeek · 4. August 2015, 20:39

display: table-cell ist sogar eine sehr gute Idee, danke.

HTML-Quellcode

CSS-Quellcode

CSS-Quellcode

Teilen