div高度自适应的问题
对象height:100%并不能直接产生效果,是因为跟其父对象有关。
- #center{
height:100%;
}
上面的css样式是无效的,不会产生任何效果。
需要改写:
- 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高度自适应的问题的更多相关文章
- div高度自适应(总结:min-height:100px; height:auto;的用法)
对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...
- 四种方法解决DIV高度自适应问题
本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...
- CSS实现div高度自适应
1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...
- DIV高度自适应及注意问题(转)
本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...
- div高度自适应
第一种: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- div高度自适应填充剩余部分
在乐学一百的开发过程中,遇到了一个小乐Fm开发,需要跟百度fm差不多,上边一个条,下边一个条,中间部分填充.但是还不能固定高度,因为屏幕的宽高都不一样...height:100%是不可行的.搜了一圈, ...
- css中div高度自适应
高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...
- Header 与 Footer 的 DIV 高度固定, 中间内容 DIV高度自适应,内容不满一页时,默认填满屏幕。
一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...
- Vue中div高度自适应
Vue中尽量不使用dom的高度计算 <template> <div :style="conheight"> </template> <sc ...
随机推荐
- hdu1517找规律
挺像巴什博弈的,直接递推就能找到规律了,从2开始到9,s win,10到18,o win,18到162,s win,一直向下推进 #include<map> #include<set ...
- Big Table中文翻译
题记:google 的成功除了一个个出色的创意外,还因为有 Jeff Dean 这样的软件架构天才. 官方的 Google Reader blog 中有对BigTable 的解释.这是Google 内 ...
- 如果从码云上git clone项目
1.本地找个文件夹右击选择 git base 2.输入地址 弹出一个窗口 需要输入用户名.密码(就是码云的登录名.密码) 3.完成
- Nginx实践03-配置虚拟主机的3种方式
基于IP.端口号.名称3种方式 1.基于IP的虚拟主机配置(使用最少) 基于ip的虚拟主机配置,需要配置单个网卡上多个ip地址,这种方式管理比较麻烦,所以用的很少. 1.1 设置单个网卡多个IP 查看 ...
- ubuntu16 install nginx
1,更新系统 sudo apt-get update 2,安装nginx sudo apt-get install nginx 3,验证是否安装成功 curl 127.0.0.1 常用配置文件和命令 ...
- AI人工智能专业词汇集
作为最早关注人工智能技术的媒体,机器之心在编译国外技术博客.论文.专家观点等内容上已经积累了超过两年多的经验.期间,从无到有,机器之心的编译团队一直在积累专业词汇.虽然有很多的文章因为专业性我们没能尽 ...
- jenkins执行shell命令,有时会提示“Command not found”
这个问题其实就是环境变量没有配准确 (1)检查你在Jenkins中设置的maven是否准确,可以通过[new job]按钮查看新建job中是否有maven选项,没有就是你配置的不准确 如果你下载的插件 ...
- 【idea】如何破解idea
1.IntelliJ IDEA官网下载 https://www.jetbrains.com/idea/download/ 2.安装IntelliJ IDEA 3.永久破解 在http://idea.l ...
- 【java基础】java关键字final
谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法.下 ...
- 使用IAR编译STM8S 怎样生产烧录文件
IAR编译后能够生成的烧录文件格式有4中,例如以下 第一种是Motorola,其生成文件和STVD生成烧录文件.s19格式一样的,即能够通用 另外一种是16进制,keil等等常都用到的. 第三种是 ...