苹果手机摔成蜜蜡摔两半的修复办法了 还能修吗

来源：蜘蛛抓取(WebSpider) 时间：2017-12-18 10:09 标签： 苹果手机摔成两半
如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？
按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100，那它应该在页面的竖向空间里占满100px的高度。
而跟W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。
那为什么 height:100%; 不起作用
当设计一个页面时，你在里面放置了一个div元素，你希望它占满整个窗口高度，最自然的做法，你会给这个div添加height: 100%;的css属性。然而，如果你要是设置宽度为width: 100%;，那这个元素的宽度会立刻扩展到窗口的整个横向宽度。高度也会这样吗？
为了理解为什么不会，你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。
因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height:。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。
上面的演示例子是父元素没有设定固定高度，于是子元素的高度height: 100% 也不会起作用。你可以根据父元素的背景色来判断子元素的高度不是100%。
那么，如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。换句话说，你需要这样做：
&div style="height: 100%;"&
想让这个div高度为 100% 。
现在你给了这个div的高度为100%，它有两个父元素&body&和&html&。为了让你的div的百分比高度能起作用，你必须设定&body&和&html&的高度。
&html style="height: 100%;"&
&body style="height: 100%;"&
&div style="height: 100%;"&
这样这个div的高度就会100%了
从这个演示中你可以看出，height: 100%;起作用了。
在使用height: 100%;时需要注意的一些事项
1、Margins 和 padding 会让你的页面出现滚动条，也许这是你不希望的。
2、如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。
相关文章：&>&&>&&>&&>&css控制宽度（高度）自适应100%
css控制宽度（高度）自适应100%
上传大小：1KB
demo包括：
1、多个div并排，宽度自适应100％ -
左右两侧div宽度固定，中间DIV占满剩余区域 ；
2、多个div，高度自适应100％ -
页面布局：头，身体，脚，占满整个屏幕；
综合评分：4.5（2位用户评分）
所需积分：1
下载次数：11
审核通过送C币
创建者：nliuwenpeng
创建者：qq_
课程推荐相关知识库
上传者其他资源上传者专辑
移动开发热门标签
VIP会员动态
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
css控制宽度（高度）自适应100%
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
omonsterbeats
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：& & & 首先我们必须理解我们自己设置的100%作用（即它继承的是父级的宽高乘以你自己的想要宽高百分比），
然后父级的百分比又是继承的是祖父级的宽高，依次类推；而我们网页中最外层的当然属标签html了，然后html
的宽度默认是100%，然后高度则不是，仅仅是一行而已，所以我们想要div能撑满整个画面的话，必须要进行相应
& & &&&style type="text/css"&&&&&&&& html&&&&&&& {&&&&&&& &height:100%;&&&&&&& &margin:0;&&&&&&& }&&&&&&& body&&&&&&& {&&&&&&&&&&& height:100%;&&&&&&&&&&& margin:0;&&&&&&&& }&&& &/style&
设置完上面的数值后，就可以将你想要div达到的效果来设置自己的百分比了
阅读(...) 评论()web前端（26）
div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。
举例说明：父div宽300高200，子div如果在这个条件下设置宽高都为100%的话,那大小就是父div的宽300高200，在尝试中你会发现，div显示会受自身和其上一级div的padding和margin影响，而其实际宽高不受影响。值得玩味噢！
如果要设置div高度100%只要为html和body设置高度为100%就可以了html,body{height:100%;}，这样之后div会按比例来继承上一级的高度了，仅仅设置的DIV元素的height属性貌似没有什么效果。那么，如下的样式可以设置Div撑满整个页面：
&style type=&text/css&&
height:100%;
&div style=&width:100%; height:100%; background-color:#666&&
有一点需要注意的是，Html级元素默认宽度是100%即整行,但是高度并不是100%而仅仅是一行而已。所以要想实现撑满整个页面，必须显式地设置高度为100% !
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：56198次
积分：1186
积分：1186
排名：千里之外
原创：66篇
(3)(22)(9)(1)(13)(10)(2)(8)(7)> 博客详情
摘要: 正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！
正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！
其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了，即100%的基数是谁，就是这个100%是相对于谁的width、height来说是100%？
div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。举例说明：父div(deman)宽300高200，子div(cc)如果在这个条件下设置divcc的宽高都为100%的话，那cc的确切大小就是父div的大小(宽300高200)，在尝试中你会发现，div显示会受自身和其上一级div的padding和margin影响，而其实际宽高不受影响。值得玩味噢！
你设div的高度为100%,那么它是和什么地方相对为100%?
前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度。可惜的是浏览器一般默认解释为内容的高度，而不是100%。但是只要为html和body设置高度为100%就可以了：html,body{height:100%;}，这样之后div会按比例来继承上一级的高度了，仅仅设置的DIV元素的height属性貌似没有什么效果。
同时，让人高兴的是，这样设置的css样式不存在浏览器兼容问题，在IE5.5、IE6、IE7、IE8还有火狐均可正常显示。
那么，如下的样式可以设置Div撑满整个页面：
&style type="text/css"&&&&&&&& html&&&&&&& {&&&&&&& &height:100%;&&&&&&& &margin:0;&&&&&&& }&&&&&&& body&&&&&&& {&&&&&&&&&&& height:100%;&&&&&&&&&&& margin:0;&&&&&&&& }&&& &/style&
&div style="width:100%; height:100%; background-color:#666; z-index:1"&&/div&
有一点需要注意的是，Html级元素默认宽度是100%，即整行；但是高度并不是100%，而仅仅是一行而已。
所以要想实现撑满整个页面，必须显式地设置高度为100%！
人打赏支持
码字总数 5150
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥

我要回帖

更多关于 苹果手机摔成两半 的文章

 

随机推荐