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. global和nonlocal的用法

    1 nonlocal声明的变量不是局部变量,也不是全局变量,而是外部嵌套函数内的变量.写在内部嵌套函数里面,它实质上是将该变量定义成了全局变量,它等价于用两个global来定义该变量.只不过用两个gl ...

  2. 报错：Original error: Could not proxy command to remote server. Original error: Error: read ECONNRESET

    问题:Appium的android真机启动手机时,会遇到以下问题: An unknown server-side error occurred while processing the command ...

  3. 使用apicloud开发移动端APP,IOS list页面滚动卡顿解决记录

    给内容容器添加样式:-webkit-overflow-scrolling:touch; -webkit-overflow-scrolling:属性控制元素在移动设备上是否使用滚动回弹效果. auto: ...

  4. APP自动化测试，判断页面与预期是否相同

    自动化测试中,有时需要验证页面跳转是否正常 1.选择appium实现,因为要填写appPcakage和appActivity,只能验证一个单独的APP,在自身APP上各个页面是否跳转正常 例如:焦点从 ...

  5. SSM项目——乐淘商城话述1.0

    乐淘商城 项目介绍 淘淘网上商城是一个综合性的B2C平台,类似京东商城.天猫商城.会员可以在商城浏览商品.下订单,以及参加各种活动.管理员.运营可以在平台后台管理系统中管理商品.订单.会员等.客服可以 ...

  6. 【VS开发】文件夹和文件选择EditBrowe控件使用

    让EditBrowse控件既能浏览文件,又能浏览文件夹... 下图是在http://www.codeproject.com/Articles/35722/MFC-Feature-Pack-CMFCEd ...

  7. Angular5 *ngIf 和 hidden 的区别

    问题 项目中遇到一个问题,有一个过滤查询的面板,需要通过一个展开折叠的button,来控制它的show 和 hide.这个面板中,有一个Select 组件,一个 input 查询输入框. 原来代码是: ...

  8. jmeter对websocket进行压测

    参考文档:https://blog.csdn.net/weixin_39430584/article/details/81508451 ①脚本调通 ②添加并发量和持续时间 ③看服务器指标

  9. SQL中前置0和后置0的处理问题

    在sql语句中经常遇到处理前置和后置数据的问题 1.首先使用convert转化函数对预处理的数据进行转化,CONVERT()函数可以将制定的数据类型转换为另一种数据类型 MySQL 的CAST()和C ...

  10. Luogu P2839 [国家集训队]middle

    题目 首先我们考虑解决中位数一类问题的常用手段:二分\(mid\),将大于等于它的设为\(1\),小于它的设为\(−1\),判断区间和是否\(\ge0\). 对于询问\(a,b,c,d\),二分完\( ...