All geek questions in one place

Header / footer layout with 100% content height in IE8

I tried to figure out how to achieve this without JavaScript and add-ons, and so far this has not been possible. Does anyone know if there is any way with pure CSS and divs to achieve a simple layout:

Simple layout

http://jsfiddle.net/zLzg8v3s/1/

This is exactly what I'm trying to do, but with divs and CSS:

http://jsfiddle.net/u0u7snh6/1/

HTML

<body class="table"> <div id="header" class="tableRow" id="top" role="banner"> <div class="tableCell"> <div> This is the top banner </div> </div> </div> <div class="tableRow tableContent"> <div class="tableCell"> <div id="content"> This is the content </div> </div> </div> <div id="footer" class="tableRow" id="bottom"> <div class="tableCell"> <div> This is the footer </div> </div> </div> </body>

CSS

 html, body { height: 100%; margin: 0; padding: 0; } .table { display: table; height: 100%; width: 100%; } .tableRow { display: table-row; text-align: center; height: 1px; } .tableCell { display: table-cell; vertical-align: middle; } .tableCell div { max-width: 400px; margin: auto; background-color: brown; } .tableContent { height: 100%; background-color: yellow; vertical-align: middle; } .tableContent * { height: 100%; vertical-align: middle; margin: auto; } .contentDiv { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #header { background-color: pink; } #footer { background-color: orange; }

This is as close to the layout as possible ... that I cannot fix:

1) The content inside the content div should be vertically aligned in the middle (it is very important that the BG content cells are also 100% of the height, so it connects to the header and footer)

2) There should not be overflow: this is IE8 behavior (as far as I can tell), so it will be difficult to see in JsFiddle ... the full code below can be tested locally with IE8 emulation mode:

 <!doctype html> <html lang="en-CA" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>MOCKUP</title> <style> html, body { height: 100%; margin: 0; padding: 0; } .table { display: table; height: 100%; width: 100%; } .tableRow { display: table-row; text-align: center; height: 1px; } .tableCell { display: table-cell; vertical-align: middle; } .tableCell div { max-width: 1200px; margin: auto; background-color: brown; } .tableContent { height: 100%; background-color: yellow; vertical-align: middle; } .tableContent * { height: 100%; vertical-align: middle; margin: auto; } .contentDiv { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #header { background-color: pink; } #footer { background-color: orange; } </style> </head> <body class="table"> <div id="header" class="tableRow" id="top" role="banner"> <div class="tableCell"> <div> This is the top banner </div> </div> </div> <div class="tableRow tableContent"> <div class="tableCell"> <div id="content"> This is the content </div> </div> </div> <div id="footer" class="tableRow" id="bottom"> <div class="tableCell"> <div> This is the footer </div> </div> </div> </body> </html>
+1
source share
1 answer

Well found the problem in your code: http://jsfiddle.net/zLzg8v3s/9/ For testing IE8: http://jsfiddle.net/zLzg8v3s/9/show/

CSS

 #content{ margin: 0 auto; }

Remove from this css:

  .tableContent * { height: 100%; vertical-align: middle; margin: auto; }

Asterisk removal fixed.

Solution: 2 JSFIDDLE: http://jsfiddle.net/p1bbyfqa/2/

HTML:

  <div id="container"> <div class="header"> <h4>This is header</h4> </div> <div class="row"> <div class="content"> <div class="left">Left Col</div> <div class="middle">Middle Col<br /> Middle Col<br /> Middle Col<br /> Middle Col<br /> Middle Col<br /> </div> <div class="right">Right Col</div> </div> </div> <div class="footer"> <h4>This is footer</h4> </div> </div>

CSS:

  html, body { height: 100%; margin: 0; padding: 0; } #container { display: table; height: 100%; width: 100%; text-align: center; } .row { display: table-row; width:100%; height: 100%; } .header, .footer{ background: pink; display:table-row; text-align: center; vertical-align: middle; } .content { display: table; background: brown; width:100%; height: 100%; overflow: auto; } .left, .right{ background: green; display: table-cell; width:10%; vertical-align: middle; } .middle{ background: brown; display: table-cell; vertical-align: middle; }
+3
source

Source: https://habr.com/ru/post/1201499/

More articles:


All Articles