set the body height width css expressions

Question

I want to change the body height dynamically using css expression.. my code is

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%
  }

But It is not working in google chrome..... The inner div is not displaying. The height of body displaying in inspect element is 0px;

JS Fiddle

http://jsfiddle.net/3x6fh/

which browser and version are you using? – NullPoiиteя Aug 15 '12 at 06:36 — NullPoiиteя, Aug 15 '12 at 06:36

score 3 · Accepted Answer · answered Aug 15 '12 at 06:46

3

div.tall_top does not show up because your body,html does not have a height.

Set the height to 100%

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

Demo: http://jsfiddle.net/codef0rmer/3x6fh/2/

answered Aug 15 '12 at 06:46

codef0rmer

10,284
9
53
76

NullPoiиteя · Answer 2 · 2012-08-15T06:44:30.303

1

css expressions is not worth learning any more. use JavaScript or css media queries. and also it will create the browser compatibility issue since it is only supported only ever IE6/7 (maybe) 5.

High Performance Web Sites: Rule – Avoid CSS Expressions

edited Aug 15 '12 at 06:44

answered Aug 15 '12 at 06:38

NullPoiиteя

56,591
22
125
143

1

They never were worth learning. Aren't they IE-only features as well? – Blender Aug 15 '12 at 06:39

score 0 · Answer 3 · answered Aug 15 '12 at 06:38

0

Your expression essentially evaluates to the height of the window, which is usually the height of the <html> element.

Adding this CSS should work:

html, body {
  height: 100%;
}

answered Aug 15 '12 at 06:38

Blender

289,723
53
439
496

set the body height width css expressions

3 Answers3