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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             html, body {

                 height: 100%;

                 margin: 0px;

                 padding: 0px;

             }

             #main {

                 background-color: #999;

                 height: 100%;

             }

             #nav {

                 background-color: #008000;

                 width: 100%;

                 height: 50px;

             }

             #content {

                 background-color: #cc85d9;

                 width: 100%;

                 position: absolute;

                 top: 50px;

                 bottom: 50px;

                 left: 0px;

             }

             #content div{

                 height: 100%;

                 overflow: hidden;

                 overflow: scroll;

             }

             #footer{

                 position: absolute;

                 bottom:0;

                 left: 0;

                 width: 100%;

                 height: 50px;

                 background: #c00;

                 color: #fff;

             }

         </style>

     </head>

     <body>

         <div id="main">

             <div id="nav">nav</div>

             <div id="content">

                 <div>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>

                 </div>

             </div>

             <div id="footer">footer</div>

         </div>

     </body>

 </html>

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

  1. webpack-使用html-webpack-plugin和ejs-loader将侧栏、头部、底部公共html做成模板，并生成合并后的html页面

    在学习前端自动化之前一直使用 PHP,JSP 将在每个页面将头部.侧栏.底部等部分引入,现在前端 "娱乐圈" 一直噼里啪啦的每天出新东西,自从接触了前端自动化我就觉得这种工作可以交 ...

  2. html 如何引入一个公共的头部和底部

    2016-01-08 作者案:尽己之力,用心打造一个商城!当你有十二分力气时,发现用了十分力气依旧没什么进展,请不要放弃希望:或许你想得到的东西正在十二分力气的地方等你:假若你用尽了十二分力气,还是没 ...

  3. HTML5 开发APP(头部和底部选项卡)

    我们开发app有一定固定的样式,比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样 我们该怎么实现呢,实现我们应该建一个主页面index.html,然后建五个子页面 ...

  4. vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

  5. RecyclerView--添加头部和底部

    1.先构建WrapRecyclerAdapter /** * Description: 可以添加头部和底部的Adapter */ public class WrapRecyclerAdapter ex ...

  6. 在html页面中引入公共的头部和底部

    参考链接: http://www.cnblogs.com/jason-star/p/3345225.html http://blog.csdn.net/jsxzzliang/article/detai ...

  7. ionic-CSS：ionic 头部与底部

    ylbtech-ionic-CSS:ionic 头部与底部 1.返回顶部 1. ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮. ion ...

  8. 利用ajax 引入静态页公共的头部与底部

    利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件,对于新入门的前端来说是很实用的方法,自己也是新手菜鸟一枚,折腾了好久,实现的方法有很多种,这是我个人觉得比较简单方便的 首先得把公用的 ...

  9. [YII2] 去除自带头部以及底部右下角debug调试功能

    YII2 去除自带头部以及底部右下角debug调试功能

随机推荐

  1. HttpRunnerManager（二）--使用

    参考资料:https://sutune.me/2018/08/05/httprunner/

  2. C# 获取当前活动网络连接mac地址

    IPAddress localIp = null; IPAddress[] ipArray; ipArray = Dns.GetHostAddresses(Dns.GetHostName()); lo ...

  3. zabbix报警后不会自动消除解决

    http://www.cnblogs.com/zhongkai-27/p/9984597.html

  4. Redis 入门 3.2.4 命令拾遗

    Redis 入门 3.2 字符串类型 3.2.4 命令拾遗 1. 增加指定的整数 INCRBY key increment   INCRBY命令与INCR命令基本一样,只不过前者可以通过increme ...

  5. 灰度图像的自动阈值分割（Otsu 法）

    关于otsu分割方法,这个文章讲的是最好的,清晰易懂,一看就是作者认真思考过的. 因为在看这个算法的时候我就想,如果一个很大的图像上,大部分像素值都在0 - 50范围内,但是有很小一块像素值在240的 ...

  6. 【PyTorch】PyTorch中的梯度累加

    PyTorch中的梯度累加 使用PyTorch实现梯度累加变相扩大batch PyTorch中在反向传播前为什么要手动将梯度清零? - Pascal的回答 - 知乎 https://www.zhihu ...

  7. 深入理解java：4. 框架编程

    了解 Servlet 和 Filter Servlet(即servlet-api.jar) 是 J2EE 最重要的一部分,有了 Servlet 你就是 J2EE 了,J2EE 的其他方面的内容择需采用 ...

  8. 向tabcontrol中添加form

    昨天花了一天的时间去找一个错误,关系是这样的,我添加一个tabcontrol就叫tc1好了,然后在tc1中再动态添加一个父窗体l叫form1,要把form1添加进tabcontrol就要先新建一个ta ...

  9. HDU 1263 水果 （STL map）

    水果 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submissi ...

  10. poj1042（贪心+枚举）

    题目链接:https://vjudge.net/problem/POJ-1042 题意:给n个湖,给出每个湖第一次打捞时鱼的数量f[i],每单位时间鱼减少的数量d[i],从湖i到湖i+1用时t[i], ...