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>