设置div 高度 总结
如果将div 的height 设置为固定的像素值,在不同分辨率的显示屏上,会看到div 在浏览器上的高度不一致。可以以百分比的形式设置div 的高度。注意,这个百分比是针对div 的上一层标签而言的,如果当前div的上一层标签的height 为 100px,那么当前标签设置hight 为 100% 时,它的高度也就是100px。
HTML 页面中,html 和 body 标签的height是auto的。如果要设置div 的高度跟浏览器一致,则要先将html 和 body 的高度设置为100%。
如果设置了父类标签的百分比高度,但是当前div 的高度还是不能以百分比的形式放大缩小时,要考虑当前div 的子类标签的高度是否都是以固定像素定义的。如果是,则也要统一改成以百分比的形式定义高度。
设置div 高度 总结的更多相关文章
- 如何设置div高度为100%
div高度通常都是固定值,直接将div高度设为100%是无效的,那么如何设置才能有效呢? 直接给div设置height:100%即可,无效的原因一定是父元素的高度为0,最常见的就是给body的直接元素 ...
- css设置div高度与宽度相等的一种方法
div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百 ...
- 设置Div多行文本超出时,以省略号代替
这个文章不错 http://www.css88.com/archives/5206 css中有一个属性: text-overflow,可以设置文本超出指定长度后的文本截取样式. 下面是从 w3shco ...
- 外部div自适应内部标签的高度,设置最小高度、最大高度
一.div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>.<ul>.<ol>或者文字等各种内容.造成外层的di ...
- 设置DIV根据内容自动调整高度的三个方法
Div即父容器在Firefox.Chrome.Safari中不会根据内容自动调节高度,我们看下面的HTML代码: <divid="main"><divid=&qu ...
- HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...
- 【CSS系列】height:100%设置div的高度
一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...
- 设置div自适应高度滚动
<body> <div id="divc" style="overflow: auto;"> </div> <a id ...
- 如何让div中的span垂直居中 ----height:100%设置div的高度
如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...
随机推荐
- JavaScript 字符串与json对象互转的几种方法
第一种:浏览器支持的转换方式(Firefox,chrome,opera,safari,ie)等浏览器: JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON. ...
- java把一个list分割成多个list存入map中(实例)
这都是最近我写工具遇到的一些点, 这些点就是指我在网上没搜到答案,然后实际上我为此花费了时间的 public static void main(String[] args) { List<Str ...
- ASCII码与unicode字符集
问题1:为什么需要字符ASCII码.unicode码等等???它们到底有什么作用? 首先要明白一个事实:在计算机中只能用一系列存储着的0和1,当我们把一个字符存放在计算机时,我们是如何表示常用的字符呢 ...
- 24小时学通Linux内核之向内核添加代码
睡了个好觉,很晚才起,好久没有这么舒服过了,今天的任务不重,所以压力不大,呵呵,现在的天气真的好冷,不过实验室有空调,我还是喜欢待在这里,有一种不一样的感觉,在写了这么多天之后,自己有些不懂的页渐渐的 ...
- 最新Java基础面试题及答案整理
最近在备战面试的过程中,整理一下面试题.大多数题目都是自己手敲的,网上也有很多这样的总结.自己感觉总是很乱,所以花了很久把自己觉得重要的东西总结了一下. 面向对象和面向过程的区别 面向过程: 优 ...
- Cookie的简单实用
作用域: 一个域名下的所有网页共用一套cookie. 几个封装好的工具方法: // 添加一个cookie function setCookie(name, value, iDay) { var oDa ...
- IDEA-各模块间引用出现问题的解决方法
1 点击项目右上角的Project Structure 2 选择Modules->父项目->点击右上角的加号->添加需要依赖的模块
- AS 常用快捷键
上篇中我们讲了Android Studio如何添加插件,这篇我们讲讲AS的快捷键,这里我说明的快捷键都是最最实用的,希望刚刚加入AS的朋友尽快的熟悉一下这几个快捷键,这样可以帮助你提高coding的效 ...
- 更改ORACLE归档路径及归档模式
更改ORACLE归档路径及归档模式 在ORACLE10g和11g版本,ORACLE默认的日志归档路径为闪回恢复区($ORACLE_BASE/flash_recovery_area).对于这个路径, ...
- 计算属性和监听,computed,watch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...