Question

我想使用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没有显示。检查元件中显示的主体高度为0px;

JS Fiddle

http://jsfiddle.net/3x6fh/

Answer 1

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

将高度设为100%

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

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

Answer 2

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

High Performance Web Sites: Rule – Avoid CSS Expressions

Answer 3

您的expression基本上会评估窗口的高度，通常是<html>元素的高度。

添加此CSS应该有效：

html, body {
  height: 100%;
}

设置体高宽度css表达式

3 个答案: