如果将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. vs2017离线安装且安装包不占用C盘空间

    [参考]vs2017离线安装且安装包不占用C盘空间 第一步:下载离线安装包 https://www.visualstudio.com/zh-hans/downloads/ 在官方地址下载vs_prof ...

  2. iOS 之 HTTPS集成实战应用

    临时想起来忘记把项目中用到的https集成整理收藏起来,以备后续不时之需.新手一般了解如下步骤即可: 1. HTTP 和 HTTPS 基本知识和学习 http://www.cnblogs.com/xi ...

  3. Cesium打包命令

    package.json中 (1) npm run build Source/Cesium.js 仅是把Cesium源码中一千两百多个js文件做了一下引用,并不会进行打包 所以这个Cesium.js也 ...

  4. rabbitmq 生产者 消费者(多个线程消费同一个队列里面的任务。) 一个通用rabbitmq消费确认,快速并发运行的框架。

    rabbitmq作为消息队列可以有消息消费确认机制,之前写个基于redis的通用生产者 消费者 并发框架,redis的list结构可以简单充当消息队列,但不具备消费确认机制,随意关停程序,会丢失一部分 ...

  5. Window通过Web方式修改域用户密码

    如何通过web方式修改域用户密码: 1.在Windows Server 2003上,系统默认提供了iisadmpwd作为一种修改域用户密码的方式 2.在Windows Server 2008上,可以提 ...

  6. MyCat(一) - 初体验

    前提: 1.安装JDK 2.安装MySQL 3.搭建了MySQL主从 1.下载MyCat,官网:http://www.mycat.io/ wget http://dl.mycat.io/1.6-REL ...

  7. ARM7与GSM实现的简单的远程控制

    幸好单从控制GSM上来说,并不是太难,它是基于串口通信的,而且全是基于AT指令的控制,说起来,就只是熟悉下指令,而且这次比赛用到的指令也比较少,主要是关于短消息方面的指令.我们用到的指令如下: AT& ...

  8. 《转载》强大全面的C++框架和库推荐!

    C++ 资源大全 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和 ...

  9. [原]Jenkins(一)---我理解的jenkins是这样的(附全套PDF下载)

    /** * lihaibo * 文章内容都是根据自己工作情况实践得出. *版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/5330 ...

  10. 关于“.bash_profile”和“.bashrc”区别的总结

    bash的startup文件 Linux shell是用户与Linux系统进行交互的媒介,而bash作为目前Linux系统中最常用的shell,它支持的startup文件也并不单一,甚至容易让人感到费 ...