Search code examples
javascripthtmlcsscss-expressions

set the body height width css expressions


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/


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/