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

标签: Css3, css, 响应式, js

已有 41 条评论

  1. 神父 神父

    你这么吊，苍井空知道么

    回复
    1. Tokin Tokin

      可能已经知道了

      回复
      1. 神父 神父

        你妹又换了皮

        回复
        1. Tokin Tokin

          新主题感觉如何，有什么地方需要优化个改进的么

          回复
        2. Tokin Tokin

          前台提交评论简直是种享受，哈哈

          回复
          1. 神父 神父

            你这种心态和手淫很像啊

            回复
            1. Tokin Tokin

              我只是说出内心的感受

              回复
              1. 神父 神父

                我形容的，也是你的内心感受。

                回复
  2. Rich Rich

    好简单，一行CSS就解决问题了￣ω￣

    回复
    1. Rich Rich

      前今天把TE重装了一下，数据还没导入=_=过几天抽空搞定

      回复
      1. Tokin Tokin

        要不要来用用我的NR5

        回复
        1. Rich Rich

          真不错，好啊(*^◎^*)

          回复
  3. 碎碎念ZWS 碎碎念ZWS

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

    回复
    1. Tokin Tokin

      你怎么没设置头像

      回复
  4. chasonma chasonma

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

    回复
    1. Tokin Tokin

      因为觉得NewRealm2的设计还不算OUT，只是很多细节处理的不好，所以就重新优化了下，改了个名字来骗点流量，哈哈

      回复
      1. chasonma chasonma

        老天的博客邮件回复是用哪个插件的？

        回复
        1. chasonma chasonma

          把你叫成老天了，哈哈哈

          回复
      2. chasonma chasonma

        找到了CommentToMail

        回复
        1. Tokin Tokin

          找到就好，不过你之前都不用邮件通知么

          回复
  5. Nitian Nitian

    评论框颜色略深

    回复
    1. Tokin Tokin

      本来想用eee，但是发现屏幕不同的角度下，eee有时候会看不到，而#ddd就不会，所以就深了点

      回复
    2. chasonma chasonma

      逆天的图片XXX_副本.jpg

      回复
  6. IceD IceD

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

    回复
    1. Tokin Tokin

      你博客的背景图太大了，两张加起来2M多，你这是要逆天啊。。。

      回复
      1. IceD IceD

        哈哈，是的：）

        回复
  7. 兮兮 兮兮

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

    回复
    1. Tokin Tokin

      嗯，没怎么优化过IE浏览器

      回复
  8. haze haze

    好美

    回复
  9. 夏日博客 夏日博客

    貌似还有个linehight充满容器。

    回复
    1. Tokin Tokin

      line-hight和hight用法差不多，所以没做介绍

      回复
  10. 青春年少 青春年少

    好牛逼的主题，好喜欢

    回复
    1. Tokin Tokin

      嗯，是挺牛逼的，不过更牛逼的是NiuBi.me

      回复
  11. 带着幾米去旅行 带着幾米去旅行

    哈哈哈，这个我早知道了

    回复
    1. Tokin Tokin

      换域名了？

      回复
      1. 带着幾米去旅行 带着幾米去旅行

        没有啊，这个域名以前和博客一起买的，最近上班，都没心思玩博了

        回复
  12. 小黎 小黎

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

    回复
    1. Tokin Tokin

      其实我真的和渣渣，我一直都不知道，我还在想CSS填充起来为合那么困难。。。。

      回复
  13. 肖振杰博客 肖振杰博客

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

    回复
  14. Jiang.tw Jiang.tw

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

    回复
    1. Tokin Tokin

      那，纯css快，还是js快。哈哈

      回复

添加新评论