Expand a DIV, TABLE, etc to fill the screen through CSS

While working with ProjectServer CSS code I came across this style and I had never seen or used something like this before, so I thought it was pretty cool.  Maybe I am showing my way behind the times self here, but I wanted to share.   The style reads the size of the browser and expands the tag accordingly. So a great way to get that DIV or TABLE tag to fill the screen super quick.   As far as I  have tested, it only works in IE.

.ClassName  {WIDTH: 100%; HEIGHT: expression((document.body.clientWidth < document.body.scrollWidth) ? “96%” : “100%”);}

3 thoughts on “Expand a DIV, TABLE, etc to fill the screen through CSS”

  1. I’m no CSS expert but how is this super quick? It has to eval some expression. Also what’s the benefit over having just writing 96%, 97%, 98%, etc. instead? Or am I missing something.

  2. Sometimes no matter what you do you can’t get a stinkin’ div or table to expand vertically to fill the page, I hit one of those times and this little ditty worked. Super quick… well one way it could be used is to add it to a style sheet to affect a class instead of adding tag attributes to who knows how many pages if that div, table, etc now suddenly needed to expand in size across the application/site. Or maybe you can get Firefox to display the height/width beautifully and IE won’t budge… if you add that style Firefox will ignore it and it will only affect IE.

    I didn’t say it was the best way, just another way. 🙂

  3. I’ve been fighting the terrible IE for a long time now and this little snippet has made me a very happy man! I didn’t know scripting was possible in CSS and now that I do… oh the things that are possible!!Thanks a million for this! Made my day ever so much brighter knowing that there is a workaround for the huge mess that is layouts in IE.

Comments are closed.