css让div高度为100%

/ 41评 / 1

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%;了

  1. 青春年少说道:

    好牛逼的主题,好喜欢

  2. 夏日博客说道:

    貌似还有个linehight充满容器。

  3. haze说道:

    好美

  4. 兮兮说道:

    博主你的博客网站,你试过在IE上显示么?首页有个BUG哦!在搜索框那

  5. IceD说道:

    猴赛雷啊,又换主题了。这次换得好简洁,好像最近这种大图滚动的背景都成风尚了。。

  6. Nitian说道:

    评论框颜色略深

  7. chasonma说道:

    有时候一些简单的问题确实给想复杂了,能用CSS就少用JS,JS其实也有方法能实时更换的。(*^__^*)
    好了,最后对主题评论一下:跟NewRealm2也没多大变化嘛,就是简洁,看的舒服,嗯,没了!2333333333

  8. 碎碎念ZWS说道:

    小泽已经在等你了,你这么叼

  9. Rich说道:

    好简单,一行CSS就解决问题了 ̄ω ̄

  10. 神父说道:

    你这么吊,苍井空知道么

发表评论

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