画面の上部に常に表示される 1 つのヘッダー、画面の下部に常に表示される 1 つのフッター、および必要に応じてスクロールバーを使用してテキスト用の残りのスペースの 3 つの行を持つ HTML テンプレートを設計しようとしています。
次の HTML は FF と Chrome では問題なく動作しますが、IE9 ではテキストが表示されません。誰かが何が悪いのか考えていますか?
<!doctype html>
<html>
<head>
<title>Image resize tetst</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 {
/* Firefox requires this */
display: table-cell;
width:100%;
}
.wrapper-row-expanded {
height: 100%;
display: table-row;
}
.wrapper-row-expanded > .wrapper-content {
height: 100%;
}
.scroll-container {
/* Firefox requires this to do the absolute positioning correctly */
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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate pulvinar ullamcorper. Integer aliquet nunc vitae massa egestas ullamcorper. Nunc volutpat eleifend sem, a convallis lacus placerat eu. Curabitur venenatis ipsum in magna bibendum tincidunt. Donec nunc metus, pellentesque ullamcorper pellentesque sit amet, ornare vel est. Nam vehicula mi nibh. Praesent consectetur ipsum tincidunt nunc tincidunt eleifend luctus nisi viverra. Donec consequat, sapien ac semper tempus, quam metus pellentesque dui, ut dictum magna nibh eu magna. Nullam condimentum turpis vel mauris ornare vehicula. Maecenas a urna at turpis venenatis iaculis in nec nunc. Nunc tempus massa sit amet arcu malesuada ornare. Aenean pellentesque euismod quam vitae ornare. Maecenas sodales, mauris vel imperdiet eleifend, massa sem pellentesque justo, sit amet malesuada felis justo in elit.
</p>
</div>
</div>
</div>
<div class="wrapper-row">
<div class="wrapper-content footer" style="height:200px">
Footer
</div>
</div>
</div>
</body>
</html>