Manchmal frage ich mich echt, was sich Programmierer von Webseiten den ganzen Tag an Beruhigungstabletten einwerfen, um nicht die Hersteller von Browsern anzufallen und hemmungslos zu verpr\u00fcgeln. Jedenfalls h\u00e4nge ich hier schon wieder an der gro\u00dfen Schokoladentafel w\u00e4hrend ich diverseste Webseiten nach kleinen Workarounds f\u00fcr diverseste ‚geht nicht‘-Situationen zu finden.<\/p>\n
Mein letzter Aufschrei der Verzweiflung galt der Angabe der H\u00f6he eines Elements, welche eben mal schnell 100% betragen sollte. Man denkt, ein Eintrag in der entsprechenden CSS Klasse sollte das Problem beheben:<\/p>\n
\n\r\n#container {\r\n margin:0 auto;\r\n background:#ffffff;\r\n border:solid 1px #FFF;\r\n width:830px;\r\n\theight: 100%;\r\n}\r\n<\/pre>\n<\/blockquote>\nDoch das verflixte Element r\u00fchrt sich keinen Meter. Warum das so ist, sollte sich erkl\u00e4ren lassen, dass sich prozentuelle Angaben immer auf das \u00fcbergeordnete Objekt beziehen. Und nun kommt der Denkfehler: Wenn die Seite einen primitiven Code hat und eben mein #container eigentlich schon das oberste Objekt ist, dann sollte doch eigentlich nichts mehr als \u00fcbergeordnetes Objekt gelten?<\/p>\n
Diese Annahme stellt sich ziemlich schnell als falsch heraus, wenn man valides (x)html schreibt, da dort noch zwei \u00fcbergeordnete Objekte existieren, welche es auszudehnen gilt: Das Body-Tag und das alles umschlie\u00dfende HTML-Tag.<\/p>\n
Eigentlich logisch, wenn man das mit der Struktur beachtet – aber ein gern gemachter Fehler dies zu \u00fcbersehen. Damit unser frommer Wunsch von vorhin funktioniert muss das Stylesheet entsprechend erweitert werden:<\/p>\n
\n\r\nhtml,body {\r\n background-color:#bacaff;\r\n margin: 0;\r\n\theight:100%; \/* That's the key! *\/\r\n}\r\n\r\n#container {\r\n margin:0 auto;\r\n background:#ffffff;\r\n border:solid 1px #FFF;\r\n width:830px;\r\n\r\n \tmin-height: 100%;\t\t\/* Min height for modern Browser *\/\r\n\theight: auto !important;\t\/* !important-Rule for modern Browser *\/\r\n\theight: 100%;\t\t\t\/* Min heigh for IE (<7) *\/\r\n}\r\n<\/pre>\n<\/blockquote>\nUnd dann funktioniert es auch.<\/p>","protected":false},"excerpt":{"rendered":"
Manchmal frage ich mich echt, was sich Programmierer von Webseiten den ganzen Tag an Beruhigungstabletten einwerfen, um nicht die Hersteller von Browsern anzufallen und hemmungslos zu verpr\u00fcgeln. Jedenfalls h\u00e4nge ich hier schon wieder an der gro\u00dfen Schokoladentafel w\u00e4hrend ich diverseste Webseiten nach kleinen Workarounds f\u00fcr diverseste ‚geht nicht‘-Situationen zu finden.<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[326,60,42],"class_list":["post-917","post","type-post","status-publish","format-standard","hentry","category-it-related-stuff","tag-website","tag-tip","tag-work"],"_links":{"self":[{"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/posts\/917","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/comments?post=917"}],"version-history":[{"count":0,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/posts\/917\/revisions"}],"wp:attachment":[{"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/media?parent=917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/categories?post=917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/tags?post=917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}