Html设置html与body元素高度问题
为什么要设置HTML和body的高度?
在一些比较正规的网站经常见到会设置html与body的高度。是为了后面的div高度正确的显示。
div的100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效。
前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度,而不是100%。
解决方法:
只要为html和body设置高度为100%就可以了html,body{height:100%;}这样之后div会按比例来继承上一级的高度了.仅仅设置的DIV元素的height属性貌似没有什么效果。
另外,你问“html{height:100%}是什么意思呀,难道高度是相对浏览器的?”的确,这里的height:100%是相对于浏览器高度来说的。浏览器高度不是页面的高度!
--------------------例1:(只给div设置高度,页面高度30%无效)--------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="" style="border: 1px solid green;height: 30%;">
div1
</div>
<div id="" style="border: 1px solid green;height: 30%;">
div2
</div>
<div id="" style="border: 1px solid green;height: 30%;">
div3
</div>
</body>
</html>
结果:
aaarticlea/png;base64,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" alt="" />
----------------------只给body设置高度100%仍然无效----------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height:100%;
}
</style>
</head>
<body>
<div id="" style="border: 1px solid green;height: 30%;">
div1
</div>
<div id="" style="border: 1px solid green;height: 30%;">
div2
</div>
<div id="" style="border: 1px solid green;height: 30%;">
div3
</div>
</body>
</html>
结果:
aaarticlea/png;base64,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" alt="" />
-----------------------同时给html与body设置100%----------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
height:100%;
}
</style>
</head>
<body>
<div id="" style="border: 1px solid green;height: 30%;">
div1
</div>
<div id="" style="border: 1px solid green;height: 30%;">
div2
</div>
<div id="" style="border: 1px solid green;height: 30%;">
div3
</div>
</body>
</html>
结果:
aaarticlea/png;base64,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" alt="" />
总结:
百分比的宽度是相对于其父元素而言,一种方法用单位明确指定父元素的高度,另一种办法就是上面介绍的从html,body开始用百分比继承。html的百分比是相对于浏览器而言,其他是相对于其父元素而言。也就是说应该养成一个好的习惯,写html网页时候上来就把html,body{height:100%}写上去。这样后面的div就可以用百分比起作用了。
Html设置html与body元素高度问题的更多相关文章
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- 父元素高度设置为min-height,子元素高度设置为100%,但实际上子元素高度你知道是多少吗?
前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...
- 设置div 居中 和得到dom元素高度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- jQuery获取页面及个元素高度、宽度【转】
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...
- JavaScript、jQuery获取页面及个元素高度、宽度
Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.client ...
- Display:table;妙用,使得左右元素高度相同
我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...
- problem: vue中获取动态元素高度
前言:始终要相信你能想到的解决方案,基本上都是可以用技术实现的... 解决方法就是在mounted中在this.$nextTick()去获取,如果没有获取到,不是写法错就是,元素没有绑定对地方,注意检 ...
随机推荐
- Linux内核分析——第三周学习笔记
20135313吴子怡.北京电子科技学院 chapter1 知识点梳理 一.Linux内核源代码简介 (视频中对目录下的文件进行了简介,记录如下) arch目录 占有相当庞大的空间 arch/x86目 ...
- 《Gogoing》Alpha版使用说明
前言: Gogoing是由我们山药蛋团队利用课余时间,基于安卓安卓系统开发完成.该软件针对于我们大学生没有赚钱能力,却又渴望外面的世界,该软件的核心理念的是“穷”游.为当代的大学生提供一个景点推荐或者 ...
- Daily Scrum 10.23
(写于10.22周四) 说下现在的人员情况: 康家华请假至下周一,刘彦熙至周五18:00,张启东至周六中午. 其他人正常工作. 然后是现在的进度情况: 已经完成服务器数据库搭建,以及基础的注册登陆功能 ...
- WC----命令行实现对文件信息的统计
需求分析: 程序处理用户需求的模式为: wc.exe [parameter][filename] 在[parameter]中,用户通过输入参数与程序交互,需实现的功能如下: 1.基本功能 支持 -c ...
- HDU 2088 Box of Bricks
http://acm.hdu.edu.cn/showproblem.php?pid=2088 Problem Description Little Bob likes playing with his ...
- 【转】Mysql事务,并发问题,锁机制
转自:http://www.cnblogs.com/fidelQuan/p/4549068.html 1.什么是事务 事务是一条或多条数据库操作语句的组合,具备ACID,4个特点. 原子性:要不全部成 ...
- java数组倒序查找值
java语言里面没有arr[:-2]这种方式取值 只能通过 arr[arr.length-1-x]的方式取值倒数的 x(标示具体的某个值)
- Tomcat源码解析-整体流程介绍
一.架构 下面谈谈我对Tomcat架构的理解 总体架构: 1.面向组件架构 2.基于JMX 3.事件侦听 1)面向组件架构 tomcat代码看似很庞大,但从结构上看却很清晰和简单,它主要由一堆组件组成 ...
- POJ 2584 T-Shirt Gumbo
T-Shirt Gumbo Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3689 Accepted: 1755 Des ...
- MT【196】整数个数
设函数$f(x)=x^2-2ax+15-2a$的两个零点分别为$x_1,x_2$, 且在区间$(x_1,x_2)$上恰好有两个正整数,则实数$a$的取值范围______ 提示:$1<|x_1-x ...