• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Zeilen gleichmässig über Höhe verteilen?

jeko

jeko

Lounge-Member
Hallo zusammen,

ich hätte da ein Problemchen für das mein CSS-Latein nicht ausreicht - und zähle auf eure Hilfe :)

Ich würde gerne einem Container mit 100% Höhe (Referenz: body/viewport) vertikal Elemente arrangieren, wobei:
- jedes Element gleich hoch sein sollte
- es keine Rolle spielt, wieviele Elemente darin sind, die Höhe der einzelnen soll sich nach der Formel ElternContainer-Höhe / AnzahlKinder anpassen

Also sprich, das was wir bei ausgeglichenen Tabellenzeilen haben. Schönerweise muss das ganze nur auf dem iPad laufen - somit sind CSS3-Selektoren/Anweisungen welcher Art auch immer möglich (und ich hoffe ihr kennt da einen der mir noch nicht untergekommen ist :)!).

Habt ihr da eine Lösung?

Liebe Grüsse
Dominique

PS: Grüsse an alle, war lange nicht mehr hier *wink*
PPS: Im Anhang eine Skizze.
 

Anhänge

  • vert-lay-01.jpg
    vert-lay-01.jpg
    27,4 KB · Aufrufe: 4
Hab' mich mal ein bisschen schlau gemacht: das geht mit dem sehr neuen Flexbox-Modul.

Im neuesten Safari und FF 11 funktioniert das:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
}
.container {
	width: 50px;
	height: 100%;
	display: -moz-box;
	display: -webkit-box;
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
}
.item {
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	background-color: #333333;
}
.item:nth-child(2n){
	background-color: #888888;
}
</style>
</head>
<body>
<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben