常见问题金海电子
新闻在线
当前位置:金海电子 >> 新闻在线 >> 常见问题 >> 浏览文章
常见问题

详解怎么让一个HTML元素的区域铺满全屏?

标签:详解,怎么,一个,元素,区域,铺满,全屏 发布时间:2024年03月29日 阅读:214次
11 如今许多网页都做得分外绚,因此许多时候大家都想着实现一些看上去吊炸天的结果,而这些前端的结果不管怎么华丽最原始的基础照旧那一行行的代码,HTML+CSS+JS就是前端的三剑客。
今天我们就讲一讲我们最近的一个实践网络营销外包,吗就是让一副图片填满整个屏幕(除去欣赏器所占区域哦)。通常有两种比较经典的结果,用到的原理之一就是这个。一个就是在PC上经常看到一些网页鼠标动一下翻一整页,另外一个就类似与手机APP第一次打开是的指导页。
而不管是哪个实例,我们都要做到的一个结果就是让一个HTML元素(标签)的区域铺满全屏?就算是传统的PC网页,我们也要接受不同的电脑屏幕高度,在传统的网页设计中我们可能采用一个固定的宽度,比如960px、1000px、1200px,当然如今这种固定宽度的设计依然很流行广告策划公司,只是把这个固定的宽度增长了(电脑屏幕的提拔,呵呵)。但假如要实现上述我们提到的看上去酷炫的风格,我们显然不能使用固定的宽度和高度。
显然,我们必要使用自适应的宽高;大家都知道宽度自适应好像比高度自适应来的更简单。可能大家都有如许的经历,认为宽度100%比高度100%的适用范围更加广;而现实上也是如此。
假设我们如今值在网页上写了、、三个最基本的标签(现实上就是许多编辑器新建一个document默认所拥有的),我们来看的盒模型

详解怎么让一个HTML元素的区域铺满全屏?

大家可以看到宽度是1350px,其实就假如出去margin就是我当前可用屏幕区域的100%宽度,而高度显然不是如许;如许我们可以普通地理解为宽度的100%比高度的100%应用范围更广。
因此要实现我们的需求,宽度方面在没有特别情况下直接使用100%即可解决;而高度我们天然也想到过用100%,但不得不考虑它的适用范围了。其实不管是宽度也好,高度也罢,它们的100%(当然其他数值也一样)是以它们的父节点作为参考的,而最大的“祖宗”的默认宽度就是100%,而高度为0。
因此得到全屏展示当然我们也想到了两种体例,一种是CSS,另外一种则是在静态CSS无法实现的时候采用JS对HTML进行DOM操作动态改变元素的CSS属性值。
1、CSS体例
在使用CSS体例的时候必须有前提的,就拿高度的100%来说,咱们必须定义它的父级元素的高度,而且高度为铺满全屏的高度。同时细致不要有其他的CSS冲突,比如我们使用position:absolute(绝对定位)的时候我们使用高度100%就会失效了。
2、javascript体例
假如由于我们的这个模块的需求,导致我们不能知足使用CSS完成这一需求的时候,我们就要动用JS,来做了。当然我们不管 是用原生的JS照旧jquery等框架。我们必须选对响应的对象及其方法。比如许多人说应该选择Screen对象,其实我觉得不是如许的,由于不管是我们的pc也好照旧我们的移动端也好,欣赏器自己每每已经占用了肯定的位置,因此我建议使用window对象来获取尺寸的数值,然后通过DOM对HTML元素的CSS属性值进行改变。
电话:4000-340-360 传真:4000-340-360 邮政编码:215000
地址:南京市 旧学前45号 中联大厦 405室