set the body height width css expressions

StackOverflow https://stackoverflow.com/questions/11965004

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/

Was it helpful?

Solution

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/

OTHER TIPS

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

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top