hey ronpay, thanks for the answer but box-shadow isn’t supported by IE8 unfortunately.
I’ll perheps try to change my layout somehow, so that I won’t need the 100% width on the footer, since it doesn’t seem to work out, feel free to still throw ideas if you got any.
The only caveat was that the middle section was only full height in modern browsers but these days that’s most of them and others just get content height which is no great loss.
Both techniques has no supprot for browsers below IE11, I don’t know why you don’t see it as a big disadvantage, because for me it is, IE is widely used in my region and dropping support for it isn’t going to be possible, all browsers above IE7 (excluding) should have full support. (I could accept it if it had no support for IE8 only…)
I think there’s a lot of work to be done before we get back to your original problem. In particular, you probably should stop using the newer HTML5 tags. IE8 doesn’t recognize them.
That just needs the html5 shiv for the html5 elements
The IE8 version though only has content height for the middle column as mentioned in the demo. The full height middle column is only available from IE11. Otherwise it works pretty much the same in all other 100% height aspects.
I can make it work in IE8 by adding some hacks but not IE9 or 10 (yet).
I think codepen itself has some problems itself in IE8 so here is the code that is working for me in IE8 (but not ie9 or ie10 (yet)).
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- html5 shiv for IE8 and under -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- If you aren't using jquery you can use the body element instead (body{width:100%;display:table;height:100%})of the #wrap div as jquery has a bug (
http://bugs.jquery.com/ticket/7261) in webkit when the body is display:table. -->
<style>
html, body, #wrap {
margin:0;
padding:0;
height:100%;
}
body {
background:#ccc;
}
#wrap {
display:table;
width:100%
}
/* if ie7 support is needed then set height of #wrap and header and footer to auto in CC's and just let it have a normal layout (or: *+html #wrap{height:auto})*/
header {
background:#999;
color:#fff;
text-align:center;
padding:10px 0
}
header, .footer, main {
display:block
}/* ie7 and under*/
header, .footer, main {
display:table-row
}
/* height 1px on the header and footer is the sticky footer technique */
header, .footer {
height:1px
}
h1 {
padding:10px;
margin:0;
}
.footer {
background:#999;
color:#fff;
text-align:center;
}
.footer p {
margin:0;
padding:10px
}
.inner {
max-width:1000px;
margin:auto;
background:#333;
background:rgba(0,0,0,0.5);
position:relative;
height:100%;
color:#fff;
}
.content {
height:100%;
}
</style>
<!--[if lt IE 9]>
<style>
#wrap{position:relative;z-index;2;}
body{position:relative;}
body:after{
content:" ";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
max-width:1000px;
margin:auto;
background:#444;
z-index:-1;
}
header , .footer , main {position:relative;z-index:2;}
.inner{padding-bottom:1px;}
.content .inner{background:transparent}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<header>
<div class="inner">Fluid Height Sticky footer simple - IE8 and IE11 (not ie9 or 10 (yet)) </div>
</header>
<main class="content">
<div class="inner">Content
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test last</p>
</div>
</main>
<footer class="footer">Sticky footer<br>
Sticky footer</footer>
</div>
</body>
</html>
I hate IE so much ^^.
Was sure the display:block reset on HTML5 was intended to fix old browsers, didn’t knew IE8 ignored it completely, well, added the HTML5shiv, thanks Paul.
About the fix, still didn’t like the diea of no support for IE9/10, i’ll perheps change my layout abit for something easier until there’ll be a full supported solution, or until fail IE will die already.
Just for fun and as proof of concept I fixed ie9 and 10 as well so here’s a version that works from IE8 upwards and in all other modern browsers.
Full code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- html5 shiv for IE8 and under -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- If you aren't using jquery you can use the body element instead (body{width:100%;display:table;height:100%})of the #wrap div as jquery has a bug (
http://bugs.jquery.com/ticket/7261) in webkit when the body is display:table. -->
<style>
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
html, body, #wrap {
margin:0;
padding:0;
height:100%;
}
body {background:#ccc;}
#wrap {
display:table;
width:100%
}
/* if ie7 support is needed then set height of #wrap and header and footer to auto in CC's and just let it have a normal layout (or: *+html #wrap{height:auto})*/
header {
background:#999;
color:#fff;
text-align:center;
padding:10px 0
}
header, .footer, main {display:block}/* ie7 and under*/
header, .footer, main {display:table-row}
/* height 1px on the header and footer is the sticky footer technique */
header, .footer {height:1px}
h1 {
padding:10px;
margin:0;
}
.footer {
background:#999;
color:#fff;
text-align:center;
}
.footer p {
margin:0;
padding:10px
}
.inner {
max-width:1000px;
margin:auto;
background:#333;
position:relative;
height:100%;
color:#fff;
}
header .inner{background:#666}
.content {height:100%;}
.content .inner {padding-bottom:1px}
/* fix for ie10 and below but given to all browers anyway*/
#wrap {
position:relative;
z-index:2;
}
body {position:relative;}
body:after {
content:" ";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
width:1000px;
max-width:1000px;
margin:auto;
background:#333;
z-index:-1;
}
@media screen and (max-width:1000px) {
body:after {width:auto}
}
</style>
<!--[if lt IE 9]>
<style>
body:after {width:auto}
</style>
<![endif]-->
</head>
</head>
<body>
<div id="wrap">
<header>
<div class="inner">Fluid Height Sticky footer simple - IE8 and IE11 (not ie9 or 10 (yet)) </div>
</header>
<main class="content">
<div class="inner">Content
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p><a href="#">test</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test last</p>
</div>
</main>
<footer class="footer">Sticky footer<br>
Sticky footer </footer>
</div>
</body>
</html>
How it works is that it draws a full length column on the body background using :after which sits beneath the actual layout and provides the illusion of a full background for those browsers that don’t understand the main technique (It’s adapted from my old absolute column overlays from the year dot).
I’m not saying I would use this approach as my feeling is that ie10 and under can just have a normal height layout and modern browsers get the good layout with minimal code.
