htmlcssresponsive-designinternet-explorer-9sticky-footer

Trouble with sticky footer, 2 column responsive layout with wide browser support

I need to create the following layout:

  1. Two equal height columns
  2. Sticky footer (positioned at bottom in light content, pushed off page in heavy content)
  3. Responsive (left nav column collapses to 100% at mobile breakpoint)
  4. Wide browser support (need to support down to IE9 but also mobile devices)

Desktop Layout:

Desktop Layout

Mobile Layout:

Mobile Layout

I've looked into many solutions for this and all of them really only solve for some of my needs. Haven't found a full solution yet. Not even the Holy Grail because many of those solutions use flexbox, CSS grid, or CSS tables and IE9 won't support those without a polyfill (which I could do, but for layout?!).

Solution

  • I'm going to have to settle on using CSS flexbox for this, then use a polyfill like Flexibility to gain older IE support.

    Here's a working Codepen, using Flexbox. 

    html, body {
	margin:0;
	padding:0
}
.wrap {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	max-width:1200px;
  margin:auto;
}
.main {
	flex: 1;
	display:flex;
}
footer, header {
	background:green;
	padding:10px;
}
.sidebar {
	background:blue;
	flex:0 0 300px;
	padding:10px;
}
.content{
	background:yellow;
	padding:10px;
	flex:1;	
}
@media screen and (max-width:680px){
	.sidebar{flex: 0;order:0}
	.main {flex-direction:column;}	
}
    <!-- could use body element instead of wrap if wanted -->
<div class="wrap">
  <header>Header</header>
  <main class="main">
    <div class="sidebar">Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar </div>
    <div class="content">Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content </div>
  </main>
  <footer>footer - <a target="blank"  href="http://codepen.io/paulobrien/full/FKAxH/">See display table version of sticky footer</a></footer>
</div>

    It would be nice to find a solution with pure CSS that can be supported by older IE, but I'm thinking that it's not worth the extra code bloat to get there, especially for a smaller percentage of users.