html头部和底部固定时,中间的内容随屏幕分别率铺满页面

html页面头部和底部有东西时,怎么让内容填充到中间的页面,且去适应不同的电脑分辨率,看代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             html, body {
 8                 height: 100%;
 9                 margin: 0px;
10                 padding: 0px;
11             }
12             #main {
13                 background-color: #999;
14                 height: 100%;
15             }
16             #nav {
17                 background-color: #008000;
18                 width: 100%;
19                 height: 50px;
20             }
21             #content {
22                 background-color: #cc85d9;
23                 width: 100%;
24                 position: absolute;
25                 top: 50px;
26                 bottom: 50px;
27                 left: 0px;
28             }
29             #content div{
30                 height: 100%;
31                 overflow: hidden;
32                 overflow: scroll;
33             }
34             #footer{
35                 position: absolute;
36                 bottom:0;
37                 left: 0;
38                 width: 100%;
39                 height: 50px;
40                 background: #c00;
41                 color: #fff;
42             }
43         </style>
44     </head>
45     <body>
46         <div id="main">
47             <div id="nav">nav</div>
48             <div id="content">
49                 <div>
50                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
51                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
52                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
53                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
54                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
55                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
56                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
57                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
58                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
59                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
60                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
61                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
62                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
63                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
64                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
65                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
66                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
67                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
68                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
69                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
70                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
71                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
72                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
73                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
74                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
75                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
76                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
77                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
78                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
79                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
80                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
81                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
82                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
83                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
84                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
85                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
86                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
87                 </div>
88                 
89             </div>
90             <div id="footer">footer</div>
91         </div>
92     </body>
93 
94 </html>
原文地址:https://www.cnblogs.com/xinheng/p/9479511.html