Creating a webpage with fixed height header and footer, and a contentWrapper div in between that stretches to the maximum screen height. The content div inside the contentWrapper needs to be vertically and horizontally aligned within its parent div. This solution works in Chrome and IE but not in Firefox (version 22.0).
Check out this fiddle for reference: http://jsfiddle.net/qWYqb/
Any suggestions on how to fix this for Mozilla Firefox?
HTML:
<div id="pageWrapper">
<header>
<div id="logo">
Logo
</div>
</header>
<div id="contentWrapper">
<div class="valignMiddle">
<div id="content">
<form>
<table>
<tbody>
<tr>
<td><label for="fullName">Full Name</label></td>
<td><input id="fullName" type="text" name="fullName" required="required" /></td>
</tr>
<tr>
<td><label for="email">E-mail</label></td>
<td><input id="email" type="email" name="email" required="required" /></td>
</tr>
</tbody>
</table>
<div>
<input type="submit" id="submit-go" value="Start Now"/>
</div>
</form>
</div>
</div>
</div>
<nav>
<ul>
<li><a href="#" class="btn1">Option1</a></li>
<li><a href="#" class="btn2">Option2</a></li>
</ul>
</nav>
</div>
CSS
* {
margin: 0;
padding: 0;
outline:none;
}
html, body{
min-height: 100%;
margin: 0;
padding: 0;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
td, th {
vertical-align:top;
}
body{
background-color: #E3E3E3;
}
/* This padding is there to stop margin collapsing */
div {
padding: 1px 0;
}
#pageWrapper{
position:absolute; top:0; bottom:0; left:0; right:0;
padding: 126px 0 100px 0;
margin: 0 auto;
width: 400px;
overflow: hidden
}
/* --- HEADER --- */
header{
width: 100%;
height: 126px;
margin-top:-126px;
background: yellow;
}
/* --- MAIN CONTENT --- */
#contentWrapper{
width: 100%;
position: static;
display: table;
overflow: hidden;
min-height: 100%;
background: red;
}
.valignMiddle {
position: static;
display: table-cell;
vertical-align: middle;
width: 100%;
}
#content{
width: 293px;
margin: 0 auto;
background: green;
}
/* --- NAVIGATION --- */
nav {
width: 100%;
height: 100px;
margin-bottom:-100px;
background: pink;
}
nav li {
display: inline-block;
list-style: none outside none;
}
nav ul {
text-align: center;
}