如果将div 的height 设置为固定的像素值,在不同分辨率的显示屏上,会看到div 在浏览器上的高度不一致。可以以百分比的形式设置div 的高度。注意,这个百分比是针对div 的上一层标签而言的,如果当前div的上一层标签的height 为 100px,那么当前标签设置hight 为 100% 时,它的高度也就是100px。

HTML 页面中,html 和 body 标签的height是auto的。如果要设置div 的高度跟浏览器一致,则要先将html 和 body 的高度设置为100%。

如果设置了父类标签的百分比高度,但是当前div 的高度还是不能以百分比的形式放大缩小时,要考虑当前div 的子类标签的高度是否都是以固定像素定义的。如果是,则也要统一改成以百分比的形式定义高度。

设置div 高度 总结的更多相关文章

  1. 如何设置div高度为100%

    div高度通常都是固定值,直接将div高度设为100%是无效的,那么如何设置才能有效呢? 直接给div设置height:100%即可,无效的原因一定是父元素的高度为0,最常见的就是给body的直接元素 ...

  2. css设置div高度与宽度相等的一种方法

    div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百 ...

  3. 设置Div多行文本超出时,以省略号代替

    这个文章不错 http://www.css88.com/archives/5206 css中有一个属性: text-overflow,可以设置文本超出指定长度后的文本截取样式. 下面是从 w3shco ...

  4. 外部div自适应内部标签的高度,设置最小高度、最大高度

    一.div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>.<ul>.<ol>或者文字等各种内容.造成外层的di ...

  5. 设置DIV根据内容自动调整高度的三个方法

    Div即父容器在Firefox.Chrome.Safari中不会根据内容自动调节高度,我们看下面的HTML代码: <divid="main"><divid=&qu ...

  6. HTML学习之给div高度设置百分比不生效的问题

    这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...

  7. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

  8. 设置div自适应高度滚动

    <body> <div id="divc" style="overflow: auto;"> </div> <a id ...

  9. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

随机推荐

  1. 让windows 2003启动后直接进入桌面

    windows 2003启动后进入桌面需要解决的几个问题 1.如何去除掉 ctrl+alt+del的提示界面 2.如何设置自动登录的用户名密码 3.在异常启动时会出现关闭事件跟踪程序 也会导致不能直接 ...

  2. python3 使用ldap3来作为django认证后台

    首先先使用ldap3测试ldap服务是否正常 我们先要拿到dc的数据,以及连接ldap的密码,还有搜索的字段(search_filter), 一般来说search_filter 这个是从负责ldap运 ...

  3. shell中uniq与sort -u 两种去重的对别

    sort -u 和 uniq都能起到删除重复信息的功能,那么他们的区别究竟在哪呢?$ cat test              jasonjasonjasonfffffjason 下面分别执行三个命 ...

  4. oracle多个单引号的处理

    Oracle多个单引号的处理 在ORACLE中,单引号有两个作用,一是字符串是由单引号引用,二是转义.单引号的使用是就近配对,即就近原则.而在单引号充当转义角色时相对不好理解. 下面转载 1.从第二个 ...

  5. JDK 5.0 注解知识快速进阶

    1.了解注解 对于Java开发人员来说,在编写代码时,除了源程序外,还会使用Javadoc标签对类.方法或成员变量进行注释,一遍使用Javadoc工具生成和源代码配套的Javadoc文件,如@para ...

  6. Linux下的awk文本分析命令实例(二)

    awk实现求和.平均.最大值和最小值的计算操作 准备和数据文件 [finance@master2-dev ~]$ cat data.txt 求和 [finance@master2-dev ~]$ ca ...

  7. webpack简介与使用

    欢迎小伙伴们为 前端导航仓库 点star https://github.com/pfan123/fr...前端导航平台访问 CommonJS 和 AMD 是用于 JavaScript 模块管理的两大规 ...

  8. linux下的ssh和rynsc

    在ubuntu下有ssh的目录,但是没有使用 ps -e | grep ssh时没有任何输出,说明没有安装ssh或者是1.x版本,可以打开etc/ssh目录,看是否有文件,下装系统再看看吧.还有ryn ...

  9. python基础类型—数字(Number)

    Python3 支持 int.float.bool.complex(复数). 在Python 3里,只有一种整数类型 int,表示为长整型,没有 python2 中的 Long. 像大多数语言一样,数 ...

  10. weapp-mobx

    // weapp-mobx.js const l = console.log; import { autorun } from "./mobx.umd.min"; function ...