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. 四十：数据库之SQLAlchemy实现排序的三种方式

    SQLAlchemy实现排序有三种方式一:order_by:查询的时候使用此方式根据某个字段或模型下的属性进行排序二:模型定义的时候,指定排序方式三:一对多的时候,relationship的order ...

  2. Dart学习笔记-运算符-条件表达式-类型转换

    Dart学习笔记-运算符-条件表达式-类型转换 一.运算符 1.算术运算符 + (加)- (减)* (乘)/ (除)~/ (取整) %(取余) 2.关系运算符 == (等等) != (不等) > ...

  3. java：LeakFilling (SQL，JDBC)

    1.JDBC中的sql里面不能加 :号,否则报错 2.Oracle数据必须提交后才可以使用JDBC进行操作,否则没有结果 3. JDBC插入序列: 首先在sequences建一个序列 insert i ...

  4. 【HTTP】三、HTTP状态保持机制（Cookie和Session）

      前面我们提到HTTP协议的特点:无连接.无状态.无连接带来的时间开销随着HTTP/1.1引入了持久连接的机制得到了解决.现在来关注其"无状态"的特点.   所谓的无状态,就是指 ...

  5. Akka系列（七）：Actor持久化之Akka persistence

    前言.......... 我们在使用Akka时,会经常遇到一些存储Actor内部状态的场景,在系统正常运行的情况下,我们不需要担心什么,但是当系统出错,比如Actor错误需要重启,或者内存溢出,亦或者 ...

  6. [转帖]Linux杂谈: 树形显示多级目录--tree

    Linux杂谈: 树形显示多级目录--tree https://www.cnblogs.com/tp1226/p/8456539.html tree -L 最近写博客的时候偶尔会需要将文件目录结构直观 ...

  7. 【转】mysql的group_concat函数，默认最大长度是1024

    mysql的group_concat函数,默认最大长度是1024 查询sql: show variables like 'group_concat_max_len'; 设置方式: 修改配置文件my.i ...

  8. opencv滤镜-使用opencv实现各种图像滤镜特效

    图像处理-滤镜 链接:https://mangoroom.cn/opencv/image-processing-filter.html opencv滤镜-实现晕影vignetting效果 链接:htt ...

  9. Openresrt最佳案例

    第1篇:Nginx介绍 Nginx是一个高性能的Web 服务器,同时是一个高效的反向代理服务器,它还是一个IMAP/POP3/SMTP 代理服务器. 由于Nginx采用的是事件驱动的架构,能够处理并发 ...

  10. 如何获取设置display:none元素及子元素的宽高

    由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 ...