对象height:100%并不能直接产生效果,是因为跟其父对象有关。

  1. #center{
    height:100%;
    }

上面的css样式是无效的,不会产生任何效果。

需要改写:

 
  1. html,body{
    margin:0px;
    height:100%;
    }
    #center{
    width:200px;
    height:100%;
    background-color:#666666;
    border:1px solid red;
    }
 

对#center对象设置了height:100%,同时设置了html与body的height:100%,这就是高度自适应的问题所在,一个对象的高度是否可以使用百分之比显示,取决于对象的父类对象,在页面中,#center直接放在body属性中,因此它的父类对象是body,而在默认状态下,浏览器并没有给body一个高度属性,因此我们所设置的#centere为height:100%并不会产生任何效果,但是一但我们给body设置了 100%之后,他的子类对象#center的height:100%便发生作用了,这便是浏览器解析规则引发的高度自适应的问题。

  代码中除了给出body的定义属性之外,还给html对象也应用了相同的样式定义,这样做的好处是使IE与firefox浏览器都能够高度自适应,Ie与firefox对页面的解析存在一定的差异,ie中html对象默认为100%的高度,而body不是,而在firefox中html标签就不是100%的高度,因此两个标签都设置为100%,可以保证两款浏览器都能正常工作。

div高度自适应的问题的更多相关文章

  1. div高度自适应(总结:min-height:100px; height:auto;的用法)

    对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...

  2. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  3. CSS实现div高度自适应

    1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...

  4. DIV高度自适应及注意问题(转)

    本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...

  5. div高度自适应

    第一种: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. div高度自适应填充剩余部分

    在乐学一百的开发过程中,遇到了一个小乐Fm开发,需要跟百度fm差不多,上边一个条,下边一个条,中间部分填充.但是还不能固定高度,因为屏幕的宽高都不一样...height:100%是不可行的.搜了一圈, ...

  7. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

  8. Header 与 Footer 的 DIV 高度固定, 中间内容 DIV高度自适应,内容不满一页时,默认填满屏幕。

    一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...

  9. Vue中div高度自适应

    Vue中尽量不使用dom的高度计算 <template> <div :style="conheight"> </template> <sc ...

随机推荐

  1. hdu1517找规律

    挺像巴什博弈的,直接递推就能找到规律了,从2开始到9,s win,10到18,o win,18到162,s win,一直向下推进 #include<map> #include<set ...

  2. Big Table中文翻译

    题记:google 的成功除了一个个出色的创意外,还因为有 Jeff Dean 这样的软件架构天才. 官方的 Google Reader blog 中有对BigTable 的解释.这是Google 内 ...

  3. 如果从码云上git clone项目

    1.本地找个文件夹右击选择 git base 2.输入地址 弹出一个窗口 需要输入用户名.密码(就是码云的登录名.密码) 3.完成

  4. Nginx实践03-配置虚拟主机的3种方式

    基于IP.端口号.名称3种方式 1.基于IP的虚拟主机配置(使用最少) 基于ip的虚拟主机配置,需要配置单个网卡上多个ip地址,这种方式管理比较麻烦,所以用的很少. 1.1 设置单个网卡多个IP 查看 ...

  5. ubuntu16 install nginx

    1,更新系统 sudo apt-get update 2,安装nginx sudo apt-get install nginx 3,验证是否安装成功 curl 127.0.0.1 常用配置文件和命令 ...

  6. AI人工智能专业词汇集

    作为最早关注人工智能技术的媒体,机器之心在编译国外技术博客.论文.专家观点等内容上已经积累了超过两年多的经验.期间,从无到有,机器之心的编译团队一直在积累专业词汇.虽然有很多的文章因为专业性我们没能尽 ...

  7. jenkins执行shell命令,有时会提示“Command not found”

    这个问题其实就是环境变量没有配准确 (1)检查你在Jenkins中设置的maven是否准确,可以通过[new job]按钮查看新建job中是否有maven选项,没有就是你配置的不准确 如果你下载的插件 ...

  8. 【idea】如何破解idea

    1.IntelliJ IDEA官网下载 https://www.jetbrains.com/idea/download/ 2.安装IntelliJ IDEA 3.永久破解 在http://idea.l ...

  9. 【java基础】java关键字final

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法.下 ...

  10. 使用IAR编译STM8S 怎样生产烧录文件

      IAR编译后能够生成的烧录文件格式有4中,例如以下 第一种是Motorola,其生成文件和STVD生成烧录文件.s19格式一样的,即能够通用 另外一种是16进制,keil等等常都用到的. 第三种是 ...