I'm working on creating a new HTML template that features a header that remains fixed at the top of the screen, a footer that stays at the bottom, and the remaining space for text with a scrollbar when needed.
The code below functions correctly in Firefox and Chrome, but for some reason, it doesn't display any text in IE9. Any suggestions on what might be causing this issue?
<!doctype html>
<html>
<head>
<title>Image resize test</title>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
}
.wrapper-row {
display: table-row;
width: 100%;
height: 1px;
}
.wrapper-content {
/* Required for Firefox */
display: table-cell;
width: 100%;
}
.wrapper-row-expanded {
display: table-row;
height: 100%;
}
.wrapper-row-expanded > .wrapper-content {
height: 100%;
}
.scroll-container {
display: inline-block;
overflow-y: auto;
position: relative;
}
.scroll-content {
position: absolute;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="wrapper-row">
<div class="wrapper-content header">
Header
</div>
</div>
<div class="wrapper-row-expanded">
<div class="wrapper-content scroll-container">
<div class="scroll-content">
<p>
Insert your text here
</p>
</div>
</div>
</div>
<div class="wrapper-row">
<div class="wrapper-content footer" style="height:200px">
Footer
</div>
</div>
</div>
</body>
</html>