我正在尝试为 CSS 中的电视监视器项目创建全屏布局，并让布局动态填充整个屏幕，而不管屏幕大小。
我的目标是让页面看起来像这样：
----------------------------
| header |
----------------------------
| l| |r |
| e| |i |
| f| |g |
| t| content |h |
| | |t |
| | | |
| | | |
----------------------------
| footer |
----------------------------
到目前为止，我已经能够通过 CSS 中的百分比来完成大部分动态大小调整，包括页眉和页脚。但是，我无法让左侧、内容和右侧部分完全填满屏幕的中心区域。
在我下面的代码中，红色 div 不应该是可见的，因为中心部分应该始终覆盖 100% 的红色 div。我尝试将最大高度/宽度设置为 100% 以及继承，但这不起作用。
我花了几个小时（prlly 10+）试图让这个布局工作，但无处可去。在这一点上，我只是在更改 CSS 并移动代码，看看我是否可以碰巧让它工作。
为什么我不能正确填写这些部分？有人可以指出我正确的方向吗？代码如下。
索引.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title></title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header class="header">
<strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
</header><!-- .header-->
<aside class="left-sidebar">
<strong>Left Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
</aside><!-- .left-sidebar -->
<aside class="right-sidebar">
<strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
</aside><!-- .right-sidebar -->
<div class="container">
<main class="content">
<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit. Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl.
</main><!-- .content -->
</div><!-- .container-->
</div><!-- .wrapper -->
<footer class="footer">
<strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
</footer><!-- .footer -->
</body>
</html>
样式.css：
/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */
html {
height: 100%;
width: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
body {
font: 12px/18px Arial, sans-serif;
height: 100%;
}
.wrapper {
min-width: 100%;
margin: 0 auto;
min-height: 80%;
background-color: red;
}
/* Header
-----------------------------------------------------------------------------*/
.header {
height: 20%;
background: #FFE680;
padding: 10px 10px 10px 10px;
}
/* Middle
-----------------------------------------------------------------------------*/
.middle {
width: 100%;
height: auto;
position: relative;
}
.middle:after {
display: table;
clear: both;
content: '';
}
.container {
width: auto;
height: auto;
float: inherit;
overflow: hidden;
margin-left: auto;
margin-right: auto;
background-color: grey;
}
.content {
padding: 10px 10px 10px 10px;
min-width: 100%;
height: auto;
min-height: 100%;
}
/* Left Sidebar
-----------------------------------------------------------------------------*/
.left-sidebar {
float: left;
width: 25%;
min-height: 100%;
max-height: 100%;
position: relative;
background: #B5E3FF;
padding: 10px 10px 10px 10px;
overflow: hidden;
}
/* Right Sidebar
-----------------------------------------------------------------------------*/
.right-sidebar {
float: right;
min-width: 25%;
max-width: 25%;
width: 25%;
background: #FFACAA;
height: 100%;
padding: 10px 10px 10px 10px;
overflow: hidden;
}
/* Footer
-----------------------------------------------------------------------------*/
.footer {
width: 100%;
height: 20%;
background: #BFF08E;
}