/ 41评 / 0

enter image description here

这两天写NewRealm5的时候,因为首屏需要设置成高度占满全屏,一直很纠结,NewRealm2的时候,我是用的是JS方式,但是这个方式响应式效果不是很理想,每次窗口更改高度都要刷新页面才能看到效果,于是抛弃掉这个方案。

<script type="text/javascript">
function onresize(){ 
var len = document.documentElement.clientHeight;$("#header").css("height",len + 'px');
}; 
onresize();
</script>

较早时间接触过“vh”这个单位,这个单位是吧屏幕分成100个部分,100vh就是占满屏幕高度了,这个方法超级方便,也能较好的支持响应式,在电脑端一切准备就绪之后,在手机端打开瞬间就失望了,手机浏览器好像并不支持vh这个单位,于是求助于

利用强大的搜索引擎,在一番筛选之后,找到了一个超级简单的解决方案,利用CSS方案,就是直接在CSS初始部分加上 html,body{height:100%;}剩下的便是安心的为容器加height:100%;了

41条回应:“css让div高度为100%”

  1. Jiang.tw说道:

    js有触发函数哇,每一次窗口变化取一次高度值赋到元素css height里。

  2. 肖振杰博客说道:

    越简单的活,大家都把它搞复杂了。。。

  3. 小黎说道:

    如果我说我很早之前就知道了,你会怎样。

  4. 哈哈哈,这个我早知道了

发表评论

电子邮件地址不会被公开。 必填项已用*标注