前端实践:怎么让一个HTML元素(标签)的区域铺满全屏?

2014-12-25 15:30 栏目:技术开发 查看(27853)

湖南幸运赛车爱彩人彩票网 www.schu9.cn 前端实践:怎么让一个HTML元素(标签)的区域铺满全屏?

现在很多网页都做得特别绚,因此很多时候大家都想着实现一些看上去吊炸天的效果,而这些前端的效果不管怎么华丽最原始的基础还是那一行行的代码,HTML+CSS+JS就是前端的三???。

今天我们就讲一讲我们最近的一个实践,吗就是让一副图片填满整个屏幕(除去浏览器所占区域哦)。通常有两种比较经典的效果,用到的原理之一就是这个。一个就是在PC上经??吹揭恍┩呈蟊甓幌路徽?,另外一个就类似与手机APP第一次打开是的引导页。

而不管是哪个实例,我们都要做到的一个效果就是让一个HTML元素(标签)的区域铺满全屏?就算是传统的PC网页,我们也要接受不同的电脑屏幕高度,在传统的网页设计中我们可能采用一个固定的宽度,比如960px、1000px、1200px,当然现在这种固定宽度的设计依然很流行,只是把这个固定的宽度增加了(电脑屏幕的提升,呵呵)。但如果要实现上述我们提到的看上去酷炫的风格,我们显然不能使用固定的宽度和高度。

显然,我们需要使用自适应的宽高;大家都知道宽度自适应似乎比高度自适应来的更简单??赡艽蠹叶加姓庋木?,认为宽度100%比高度100%的适用范围更加广;而实际上也是如此。

假设我们现在值在网页上写了<html>、<head>、<body>三个最基本的标签(实际上就是很多编辑器新建一个document默认所拥有的),我们来看<body>的盒模型

前端实践:怎么让一个HTML元素(标签)的区域铺满全屏?

大家可以看到宽度是1350px,其实就如果出去margin就是我当前可用屏幕区域的100%宽度,而高度显然不是这样;这样我们可以通俗地理解为宽度的100%比高度的100%应用范围更广。

因此要实现我们的需求,宽度方面在没有特殊情况下直接使用100%即可解决;而高度我们自然也想到过用100%,但不得不考虑它的适用范围了。其实不管是宽度也好,高度也罢,它们的100%(当然其他数值也一样)是以它们的父节点作为参考的,而最大的“祖宗”<html>的默认宽度就是100%,而高度为0。

因此得到全屏展示当然我们也想到了两种方式,一种是CSS,另外一种则是在静态CSS无法实现的时候采用JS对HTML进行DOM操作动态改变元素的CSS属性值。

CSS方式

在使用CSS方式的时候必须有前提的,就拿高度的100%来说,咱们必须定义它的父级元素的高度,而且高度为铺满全屏的高度。同时注意不要有其他的CSS冲突,比如我们使用position:absolute(绝对定位)的时候我们使用高度100%就会失效了。

javascript方式

如果因为我们的这个??榈男枨?,导致我们不能满足使用CSS完成这一需求的时候,我们就要动用JS,来做了。当然我们不管 是用原生的JS还是jquery等框架。我们必须选对相应的对象及其方法。比如很多人说应该选择Screen对象,其实我觉得不是这样的,因为不管是我们的pc也好还是我们的移动端也好,浏览器本身往往已经占用了一定的位置,因此我建议使用window对象来获取尺寸的数值,然后通过DOM对HTML元素的CSS属性值进行改变。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:前端实践:怎么让一个HTML元素(标签)的区域铺满全屏? - 微构网络
分享:
  • 中央直属机关工委主要职责 2019-05-22
  • 打造“互联网+”,共享经济改变百姓生活 2019-04-22
  • 破财免灾!C罗愿向西班牙税务部门缴纳1880万欧元 2019-04-19
  • 中国品牌SUV新标杆 人民网试驾WEY VV7VV5 2019-04-19
  • 杨爱国:借助小博会促进尚志社会经济加快发展 2019-04-15
  • 泪目!川农院士逝世5年,夫人每日都去看他的雕像…思念如马,不停蹄! 2019-04-15
  • 海信世界杯首秀出奇招 竟打出俄文广告 2019-03-25
  • 财政部:对原产于美国的500亿美元进口商品加征关税 2019-03-11
  • 我和《人民日报》(我与人民日报·纪念人民日报创刊70周年) 2019-03-11
  • 杭州再增100个海绵城市项目 2018-11-08
  • 新华网申领新闻记者证资格审核公示 2018-11-08
  • 540| 864| 515| 783| 726| 556| 329| 984| 332| 861|