这两天写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%;了