设置身体高度宽度 css 表达式答案

【问题标题】：set the body height width css expressions设置身体高度宽度 css 表达式
【发布时间】：2012-08-15 06:33:22
【问题描述】：

我想用css表达式动态改变身体高度。我的代码是

HTML

<body >
 <div class="tall_top" >

 </div>
</body>

CSS

body {
     width:      100px;
     height:     expression(document.documentElement.clientHeight);
     background: red;
   }
 .tall_top { 
   background:#f1f1f1; 
   width:50%; 
   height:50%
  }

但它在谷歌浏览器中不起作用.....内部 div 没有显示。检查元素中显示的body高度为0px；

JS 小提琴

http://jsfiddle.net/3x6fh/

【问题讨论】：

您使用的是哪个浏览器和版本？

标签： javascript html css css-expressions

【解决方案1】：

div.tall_top 没有显示，因为您的body,html 没有高度。

将高度设置为100%

    html,body {
        margin:0;
        width:100%;
        height:100%;
        background:blue;
    }

演示：http://jsfiddle.net/codef0rmer/3x6fh/2/

【讨论】：

【解决方案2】：

您的expression 本质上计算为窗口的高度，通常是<html> 元素的高度。

添加这个 CSS 应该可以工作：

html, body {
  height: 100%;
}

【讨论】：

【解决方案3】：

css 表达式已经不值得学习了。使用 JavaScript 或 css media queries。而且它还会产生浏览器兼容性问题，因为它只支持 IE6/7（也许）5。

High Performance Web Sites: Rule – Avoid CSS Expressions

【讨论】：

他们从来不值得学习。它们不也是 IE 独有的功能吗？