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. Git使用手册/Git教程：git fetch 将远程仓库的分支及分支最新版本代码拉取到本地

    相关文章: 关于验证是否存在ssh配置以及生成SSH Key的方法可以参照文章:Git使用手册:生成SSH Key 关于SSH Key的使用和公钥在gitHub.gitLab的配置等,请参考文章:Gi ...

  2. kafka代码测试连接

    1.发送: package kafka.test; import java.util.Date;import java.util.Properties;import java.util.Random; ...

  3. CTF—WEB—sql注入之宽字节注入

     宽字节注入 宽字节注入是利用mysql的一个特性,mysql在使用GBK编码(GBK就是常说的宽字节之一,实际上只有两字节)的时候,会认为两个字符是一个汉字(前一个ascii码要大于128,才到汉字 ...

  4. LeetCode.917-只反转字母(Reverse Only Letters)

    这是悦乐书的第353次更新,第378篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第215题(顺位题号是917).给定一个字符串S,返回"反向"字符串 ...

  5. Docker面试题（二）

    什么是虚拟化? 虚拟化允许您在相同的硬件上运行两个完全不同的操作系统.每个客户操作系统都经历了引导,加载内核等所有过程.您可以拥有非常严格的安全性,例如,客户操作系统无法完全访问主机操作系统或其他客户 ...

  6. Lambda表达式动态组装查询条件

    最近比较闲,年底了,项目也进入尾声:每天就是维护一下系统,整理整理文档,整理知识点,这样才觉得有点意思: 问题 在使用Linq的where()查询的时候,不知道大家是怎么动态组装多个查询条件时,是怎么 ...

  7. SQL修改数据表字段长度

    alter table m_Assysn_t nocheck CONSTRAINT allAlter Table m_Assysn_t ALTER column ppid VARCHAR(150)al ...

  8. 思考--mysql 分库分表的思考

    查询不在分库键上怎么办,扫描所有库?由于分库了,每个库扫描很快?所以比单个表的扫描肯定快,可以这样理解吗. 多表jion怎么弄,把内层表发给每个分库吗? citus,tidb 都有这些问题,citus ...

  9. 10分钟学会RabbitMQ安装部署

    一.单机版的 RabbitMQ 的安装部署 1.安装 Erlang 环境 wget http://erlang.org/download/otp_src_19.3.tar.gz tar -zxvf o ...

  10. Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 的解决办法

    eclipse导入mavn工程报Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 的解决办法: 错 ...