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. Idea创建项目后，提交项目到码云的问题

    1.创建git仓库:vcs->import int version control->Create git repository 2.在项目头点击右键->git->add 3. ...

  2. DataGridView中EnditCommit()调用之后，单元格的内容被全选了，每次输入都要鼠标点击定位到最后才能继续输入

    因为某些需求,DataGridView在输入一次内容,就要调用ECommitEdit(DataGridViewDataErrorContexts.Commit)来将内容提交,但是这样做之后,控件就会当 ...

  3. CDH6.2扩容

    参考: yum方式扩容: https://www.cnblogs.com/yinzhengjie/articles/11104776.html 二进制包方式扩容: https://www.cnblog ...

  4. [转帖]达梦数据库（DM6)和ORACLE 10g的异同点

    达梦数据库(DM6)和ORACLE 10g的异同点    https://bbs.aliyun.com/detail/351337.html   花花浪子 级别: 小白 发帖 0 云币 -41 加关注 ...

  5. 基于Spark的电影推荐系统

    数据文件: u.data(userid  itemid  rating  timestamp) u.item(主要使用 movieid movietitle) 数据操作 把u.data导入RDD, t ...

  6. springMVC原理简单介绍

    说明: 用户发送请求到DispatcherServlet,即前端控制器 DipatcherServlet调用处理器映射器HandlerMapping解析 处理器映射器HandlerMapping根据请 ...

  7. mysql表优化

    一.定期分析表 ANALYZE [LOCAL | NO_WRITE_TO_BINLOG] TABLE tbl_name [, tbl_name] 二.定期检查表 CHECK TABLE tbl_nam ...

  8. Python：什么是进阶，如何进阶？

    目录 Python:什么是进阶,如何进阶? 1. 什么是进阶? 2. 如何进阶? 3. 除此之外呢? Python:什么是进阶,如何进阶? 1. 什么是进阶? 一门编程语言的基础部分,往往非常简单.如 ...

  9. python中魔法方法__str__与__repr__的区别

    提出问题 当我们自定义一个类时,打印这个类对象或者在交互模式下直接输入这个类对象按回车,默认显示出来的信息好像用处不大.如下所示 In [1]: class People: ...: def __in ...

  10. [Vue] vue的一些面试题

    1.v-model 的原理 v-model 是一个语法糖,它即可以支持原生表单元素,也可以支持自定义组件.v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件. text 和 text ...