{"id":83,"date":"2013-04-24T22:09:57","date_gmt":"2013-04-24T22:09:57","guid":{"rendered":"http:\/\/devblog.cssec.de\/?p=83"},"modified":"2019-02-09T19:53:12","modified_gmt":"2019-02-09T19:53:12","slug":"bildschirmfuellendes-layout-in-html","status":"publish","type":"post","link":"https:\/\/www.cssec.de\/blog\/2013\/04\/24\/bildschirmfuellendes-layout-in-html\/","title":{"rendered":"bildschirmf\u00fcllendes Layout in HTML"},"content":{"rendered":"<p>Neulich habe ich mir die Frage gestellt, wie man ohne \u201cposition = absolute\u201d eine Seite hinbekommt, die sich immer an die Gr\u00f6\u00dfe des Browser-Fensters anpasst, dabei eine Kopf- und eine Fu\u00dfzeile erh\u00e4lt, wobei die Fu\u00dfzeile immer am unteren Ende des Bildschirms ist.<br \/>\nGenauso stellt sich regelm\u00e4\u00dfig die Frage, wie man z.B. ein zweispaltiges horizontales Layout bekommt, bei dem eine Spalte eine fixe, die andere eine dynamische Gr\u00f6\u00dfe bekommt, so dass auch hier bildschirmf\u00fcllend gelayoutet wird.<\/p>\n<p>Sicherlich kann man das mit Tabellen erreichen. Allerdings haben Tabellen an bestimmten Punkten jedoch ihre Eigenarten und es hei\u00dft immer, dass man m\u00f6glichst wenig mit den unflexiblen HTML-Tabellen arbeiten soll.<br \/>\nDaher m\u00f6chte ich das Layouting komplett mit DIVs realisieren. Eine neue Webapplikation, die ich gerade erstelle, soll dabei folgendes komplexes Layout haben:<br \/>\n<img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-medium wp-image-84\" src=\"http:\/\/devblog.cssec.de\/wp-content\/uploads\/2018\/11\/layout_ksupport.png-300x222.jpg\" alt=\"\" width=\"300\" height=\"222\" srcset=\"https:\/\/www.cssec.de\/blog\/wp-content\/uploads\/2018\/11\/layout_ksupport.png-300x222.jpg 300w, https:\/\/www.cssec.de\/blog\/wp-content\/uploads\/2018\/11\/layout_ksupport.png.jpg 502w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\nAls ich damals den Cutworks-Webshop erstellt habe, habe ich zur Positionierung der Fu\u00dfleiste eine absolute Positionierung genutzt. Dies hat zwar funktioniert, jedoch mehr schlecht als recht. Speziell wenn das Browser-Fenster ver\u00e4ndert wurde, kam dies nicht immer mit.<\/p>\n<p>Nach einiger Recherche im Netz habe ich etwas zu tabellenorientierten DIV\u2019s gefunden, die ich hier nun beschreiben m\u00f6chte.<br \/>\nAusgangspunkt ist ein Layout, dass aus folgenden Bereichen besteht:<\/p>\n<p>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013<br \/>\nheader &#8211; Bereich mit fixer Gr\u00f6\u00dfe<br \/>\n\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013<br \/>\nTextbereich &#8211; flexible Gr\u00f6\u00dfe | info-Bereich |<br \/>\nhorizontal und vertikal | horizontal fixe |<br \/>\n| vertikal flexibel |<br \/>\n\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013<br \/>\nfooter &#8211; Bereich mit fixer Gr\u00f6\u00dfe<br \/>\n\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013<\/p>\n<p>Um das zu erreichen definieren wir 7 DIV-Bereiche:<\/p>\n<div class=\"fullPanel\">\n<p>&nbsp;<\/p>\n<div class=\"header\"><!-- Das hier ist der Header-Bereich --><\/div>\n<p>&nbsp;<\/p>\n<div class=\"mainContent\">\n<p><!-- Das hier ist der vertikal flexible Hauptbereich --><\/p>\n<div class=\"mainTable\">\n<p><!-- gleicher Bereich als Basis f\u00fcr die horizontal nebeneinander liegenden Panels --><\/p>\n<div class=\"leftPanel\">&#8230;&#8230;..<\/div>\n<p>&nbsp;<\/p>\n<div class=\"rightPanel\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<p><!-- ende mainTable --><\/p>\n<\/div>\n<p><!-- Ende mainContent --><\/p>\n<div class=\"footer\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>Das Div mit der Klasse fullPanel dient dabei dazu, den kompletten Bildschirm auszuf\u00fcllen. Der mittlere Bereich wird noch einmal unterteilt und es wird noch einmal ein separates \u201cmainTable\u201d-Element angelegt.<br \/>\nWarum das so ist, dazu sp\u00e4ter.<\/p>\n<p>Auf Basis dieses Layouts erfolgt die Magie im CSS. Hintergrund ist das Display-Attribut, f\u00fcr das es nicht nur, block, inline gibt, sondern auch die Werte: table, table-row, table-column und table-cell. Mit Hilfe dieser Werte wird das Layout zum Kinderspiel. Im Endeffekt verhalten sich bei Setzen der entsprechenden Werte die Divs dann fast wie Tabellen.<\/p>\n<p>Die fullPanel-Klasse wird bildschirmf\u00fcllend mit 100% H\u00f6he und 100% Breite angelegt und mit der table-Eigenschaft belegt:<\/p>\n<pre lang=\"css\">  .fullPanel {\r\n       display: table;\r\n       width: 100%;\r\n       height: 100%;\r\n   }\r\n<\/pre>\n<p>Header, Footer und mainContent-Divs sind jeweils table-rows. Dabei werden header und footer mit einer entsprechenden Pixelgr\u00f6\u00dfe angelegt, die restliche Gr\u00f6\u00dfe soll der mainContent-Bereich erhalten. Dazu wird die Gr\u00f6\u00dfe des mainContent-Bereichs auf 100% gestellt.<\/p>\n<pre lang=\"css\">   .header {\r\n      \tdisplay: table-row;\r\n        height: 120px;\r\n        width: 100%;\r\n   }\r\n\r\n  .footer {\r\n      display: table-row;\r\n      height: 100px;\r\n      width: 100%;\r\n   }\r\n\r\n  .mainContent {\r\n     height: 100%;\r\n     display: table-row;\r\n     width: 100%;\r\n  }\r\n<\/pre>\n<p>Die Width-Angabe ist prinzipiell nicht n\u00f6tig, da diese entsprechend des Vater-Divs bestimmt wird. Aus Lesbarkeitsgr\u00fcnden habe ich diese Attribute jedoch untergebracht.<\/p>\n<p>Nun zum mainTable. Damit der mittlere Bereich nicht nur in der H\u00f6he, sondern auch in der Breite flexibel ist, wird innerhalb des table-Rows erneut ein Div angelegt, dass quasi wiederum als Layout-Tabelle f\u00fcr das linke und rechte Panel fungiert. Es bekommt eine H\u00f6he und eine Breite von 100% und erh\u00e4lt wiederum table als display-Wert.<\/p>\n<pre lang=\"css\">  .mainTable {\r\n     display: table;\r\n     width: 100%;\r\n     height: 100%;\r\n  }\r\n<\/pre>\n<p>Das linke und rechte Panel werden nun innerhalb der Tabelle angeordnet. Merkw\u00fcrdigerweise funktioniert hier nicht table-column, sondern nur table-cell als display-Wert.<br \/>\nDer rechte Info-Bereich erh\u00e4lt eine Breite von 250px. Die verbleibende Breite wird dann dem linken Panel zugeordnet.<\/p>\n<pre lang=\"css\">   .leftPanel {\r\n        display: table-cell;\r\n        width: 100%;\r\n    }\r\n\r\n   .rightPanel {\r\n       display: table-cell;\r\n       width: 250px;\r\n   }\r\n<\/pre>\n<p>Damit die Bereiche korrekt dargestellt werden k\u00f6nnen, muss in jedem Panel Inhalt vorhanden sein. Das kann beispielsweise auch ein nbsp sein.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neulich habe ich mir die Frage gestellt, wie man ohne \u201cposition = absolute\u201d eine Seite hinbekommt, die sich immer an die Gr\u00f6\u00dfe des Browser-Fensters anpasst, dabei eine Kopf- und eine Fu\u00dfzeile erh\u00e4lt, wobei die Fu\u00dfzeile immer am unteren Ende des Bildschirms ist. Genauso stellt sich regelm\u00e4\u00dfig die Frage, wie man z.B. ein zweispaltiges horizontales Layout [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts\/83"}],"collection":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":2,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts\/83\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts\/83\/revisions\/272"}],"wp:attachment":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/media?parent=83"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/categories?post=83"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/tags?post=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}