Flex Layout nicht auf volle Höhe

MichaelA · #1 (**permalink**) 13.11.2014, 15:16

Ich hätte gerne ein ganz simples Layout. 4 Divs die jeweils ein viertel des Bildschirms völlig ausfüllen.

Zur Breite hin funktioniert das auch gut, jedoch nicht in der höhe. Warum funktioniert der Befehl Height: 100% nicht?

Edit fiddle - JSFiddle

etux · #2 (**permalink**) 13.11.2014, 16:22

Weil der Browser für die Berechnung der 100% Höhe keinen Bezugspunkt hat. Daher wird der Wert „auto“ anstelle von 100% gesetzt.

In Deinem Fall brauchen also auch html und body eine Höhenangabe von 100%.
Für .fullheight dürfte ein „min-heigh“ sinnvoller als „height“ sein.
Ggf. Browser-Default-Abstände auf „0“ setzen.

html und body würden keine Höhenangabe brauchen, wenn .fullheight „absolute“ oder „fixed“ positioniert wäre – View-Port wird als Bezugspunkt genommen.

Ich würde es allerdings eher mit CSS-Tabellen umsetzen.

MrMurphy · #3 (**permalink**) 14.11.2014, 05:55

Hallo,

mir erscheint die Lösung ganz normal mit height am einfachsten.

HTML-Code:

<body>
   <main role="main">
      <div>
         <p>div 1</p>
      </div>
      <div>
         <p>div 2</p>
      </div>
      <div>
         <p>div 3</p>
      </div>
      <div>
         <p>div 4</p>
      </div>
   </main>
</body>

Hinweis: Das gesamte CSS benutzt das border-box-Modell.

Mit float würde das CSS folgendermaßen aussehen (clear durch ein hinterlegtes clearfix an anderer Stelle):

Code:

      html {
         height: 100%;
         border: 3px solid green;
      }
      body {
         height: 100%;
         border: 3px solid red;
      }
      main {
         height: 100%;
         border: 3px solid orange;
      }
      div {
         width: 50%;
         height: 50%;
         float: left;
         border: 3px solid blue;
      }

HTML5: MichaelA - Layout vier Rechtecke

und mit dem Flexbox-Modell folgendermaßen:

Code:

      html {
         height: 100%;
         border: 3px solid green;
      }
      body {
         height: 100%;
         border: 3px solid red;
      }
      main {
         height: 100%;
         border: 3px solid orange;
         display: flex;
         flex-wrap: wrap;
      }
      div {
         width: 50%;
         height: 50%;
         border: 3px solid blue;
      }

HTML5: MichaelA - Layout vier Rechtecke

Gruss

MrMurphy

etux · #4 (**permalink**) 14.11.2014, 09:44

Zitat:

Zitat von MrMurphy

mir erscheint die Lösung ganz normal mit height am einfachsten.

… solange der Inhalt aus nicht viel mehr als ein paar Zeichen besteht, könnte das sogar klappen.

Und zwar auf allen Geräten.

MichaelA · #5 (**permalink**) 17.11.2014, 10:23

Danke für die Hilfe. Ich habe es jetzt mit Position: absolute gelöst. Dann klappt es ganz gut.

etux · #6 (**permalink**) 17.11.2014, 10:36

Zitat:

Zitat von MichaelA

Danke für die Hilfe. Ich habe es jetzt mit Position: absolute gelöst. Dann klappt es ganz gut.

Bitte, gern.

Hier auf die Schnelle die Beide Varianten, basierend auf Deinem Quellcode:

CSS-Table:

HTML-Code:

<!doctype html>
<meta charset="UTF-8">
<title>MichaelA :: xhtmlforum.de</title>
<style>
* { margin: 0; padding: 0; }
html, body { height: 100%; }

#editorSplitter {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}
#editorSplitter > div {
  display: table-row;
}
#editorSplitter div div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.red { background-color: red; }
.blue { background-color: blue; }
.yellow { background-color: yellow; }
.green { background-color: green; }
</style>
<div id="editorSplitter">
	<div>
		<div class="red">Container 1</div>
		<div class="yellow">Container 2</div>
	</div>
	<div>
		<div class="green">Container 3</div>
		<div class="blue">Container 4</div>
	</div>
</div>

Pos. "absolute":

HTML-Code:

<!doctype html>
<meta charset="UTF-8">
<title>MichaelA :: xhtmlforum.de</title>
<style>
* { margin: 0; padding: 0; }

.fullheight {
	position: absolute;
	width: 100%;
	min-height:100%;
}

.red { background-color: red; }
.blue { background-color: blue; }
.yellow { background-color: yellow; }
.green { background-color: green; }
</style>
<div id="editorSplitter" class="fullheight" style="display:flex;">
	<div style="flex: 1; display: flex; flex-direction: column">
		<div id="pane-lt" class="red" style="flex: 1;">Container 1</div>
		<div id="pane-lb" class="yellow" style="flex: 1;">Container 2</div>
	</div>
	<div style="flex: 1; display: flex; flex-direction: column">
		<div id="pane-rt" class="green" style="flex: 1;">Container 3</div>
		<div id="pane-rb" class="blue" style="flex: 1;">Container 4</div>
	</div>
</div>

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Liquid Layout: Feste Höhe	rezilade	CSS	1	11.08.2010 22:19
Höhe in einem dreispaltigen Layout	sliver2203	CSS	4	24.02.2009 10:55
Dynamische Layout Breite und Höhe	altes-kind	CSS	7	12.01.2007 11:54
layout problem mit höhe	Deude	CSS	6	31.03.2005 21:00
3 spalten layout - immer auf gleiche höhe "auffüllen&qu	dimension	CSS	2	22.09.2004 12:02