如果将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. 《FPGA全程进阶---实战演练》之搞定阻抗匹配

    笔者最近几天在做视频采集板卡时,视频显示端打算采用 USB2.0接口+上位机 显示,其中USB需要做阻抗匹配.通常情况下USB的阻抗值需要做到90Ω±10%.下面就讲解一下关于阻抗匹配的知识,哪里说得 ...

  2. WinForm中一个窗体调用另一个窗体

    [转] WinForm中一个窗体调用另一个窗体的控件和事件的方法(附带源码) //如果想打开一个 Form2 的窗体类,只需要: Form2 form = new Form2(); //有没有参数得看 ...

  3. POI导出Excel发现不可读取的内容

    环境说明:MyEclipse Tomcat7.0 通过后台查询数据,导出Excel在打开时会出现以下提示: 点击否,则不显示任何内容,点击是,弹出 查看修改记录为: 通过WPS打开不会出现任何提示,可 ...

  4. C# 不安装Oracle客户端情况下,如何连接到Oracle数据库

    简介: 在我们开发应用场景经常碰到需要连接Oracle数据库,这也是相当常见的一种情况.一般.Net环境连接Oracle数据库,可以通过TNS/SQL.NET 配置文件,而 TNS 必须要 Oracl ...

  5. [原][openstack-pike][compute node][issue-1]openstack-nova-compute.service holdoff time over, scheduling restart.

    在安装pike  compute node节点的时候遇到启动nova-compute失败,问题如下(注意红色字体): [root@compute1 nova]# systemctl start ope ...

  6. vb编程中的选择结构语句的写法

    1996年,Bohra和Jacopin提出了结构化算法的3中种基本结构:顺序结构.选择结构和循环结构 目前已经得到证明,无论多么复杂的程序,都是由上面的3种基本结构中的一种或者多种的组合构成 在此笔者 ...

  7. 初识springcloud

    springcloud的基础是springboot,简单地说,就是通过写的springboot应用,使用springcloud集成. 在学习springcloud的过程中,自己的开发环境不能保证和博客 ...

  8. python处理u开头的字符串

    是用python处理excel过程中,从表格中解析除字符串,打印出来的中文却显示成了u'开头的乱码字符串,在控制台中输出的编码格式是utf-8,而excel表格的数据也是utf-8编码成的,但是解析成 ...

  9. APK使用APKTOOL命令行进行解包和重新打包

    在刚开始安卓逆向时遇到了一个很坑爹的问题,就是对apk进行反编译后不能重新打包, 查了一些资料,这里就简单说一下用apktool进行解包和打包的整个过程. 首先把一个apk和apktool放到同一目录 ...

  10. python接口自动化测试(c测试环境的准备)

    接口测试的方式有很多,比如可以用工具(jmeter,postman)之类,也可以自己写代码进行接口测试,工具的使用相对来说都比较简单,重点是要搞清楚项目接口的协议是什么,然后有针对性的进行选择,甚至当 ...