3

I want to set the height of a div based on CSS expression.

Basically it should be set as some % (say 90%) of the viewport width I tried the following, but is not working;

height:expression(document.documentElement.clientWidth ? document.documentElement.clientWidth : window.innerWidth );

I am looking at a cross-browser way of doing this (IE7+, FF4+, Safari)

Knu
  • 14,806
  • 5
  • 56
  • 89
copenndthagen
  • 49,230
  • 102
  • 290
  • 442
  • 2
    I would recommend using Javascript for this, not CSS. Is there a reason why you cannot use Javascript? Out of curiosity, **why** does the height need to be related to viewport width? – Red Orca Oct 25 '11 at 11:03
  • Ok..So to answer why I cannot use Javascript is bcoz I am using something called responsive/fluid design which mainly uses CSS to render same HTML differently on different screen sizes....AND for the 2nd part for the height to be related to viewport width is bcoz of some CSS transform which I use to rotate text and so the height gets calculated based on parent element width ...hope I am able to clarify...I know it's a bit confusing to understand, which is why I did not specify it in the 1st place.. – copenndthagen Oct 25 '11 at 11:09
  • @testndtv - that is actually a very good reason for wanting to do what you're asking (I was curious too). Now I've got a bit more info I might dig around a bit more to see if there's any other way of doing it that might solve the problem for you. – Spudley Oct 25 '11 at 11:31
  • @Spudley - Yes, I am looking at avoiding JS for what I am doing...I know it can be done using JS, but could create issues for me, especially when trying to toggle to different styles at different screen sizes... Desperately looking forward to something using CSS... – copenndthagen Oct 25 '11 at 12:00
  • Have been looking, but haven't found anything yet. Thought there might be a way to scale a rotated element to fit its parent (which might have been be another way around what you're trying to do), but can't even find that. – Spudley Oct 25 '11 at 12:41

2 Answers2

14

CSS expressions are not supported anywhere except IE (and are considered a bad idea even there).

However, there isn't really another way of doing what you're asking, at least not using just CSS.

The only alternative is to use Javascript, and this is what I think you're going to have to do.

In fact, IE's CSS expressions are themselves Javascript, which allows quite powerful expressions, but also has the negative effect of removing the abstraction of layout and script. This is why they're frowned on, but there are use cases such as yours where pure layout requires some form of expression.

As I say, there really isn't any answer for you right now in CSS.

There might be some hope for the future, as Google are currently experimenting with some enhancements to CSS which include variables. Article about it here: http://johanbrook.com/design/css/webkit-css-variables-mixins-nesting/. However, I'm not sure whether even this would allow the kind of expressions you're needing.

So possibly this is something that might continue needing needing Javascript into the future. It certainly does for now, either way.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Ok..so atleast for IE, how do i make the CSS expression work? – copenndthagen Oct 26 '11 at 09:35
  • CSS Expressions only work in IE up to IE7. They were removed from IE8 because they were non-standard. (documentation here: http://msdn.microsoft.com/en-us/library/cc304082%28v=vs.85%29.aspx#expressions) – Spudley Oct 26 '11 at 09:43
0

You're combining CSS and javascript, which will not work.

You either want to just set height:90%; (which will do 90% of the width of the parent element, not the page - unless the div is at the root of the page).

Otherwise you should create a javascript block (preferably as part of an onload script), e.g... (not tested)

<body onload="document.divName.style.width=(document.documentElement.clientWidth ? document.documentElement.clientWidth : window.innerWidth)*0.9">

Edit - Thanks @Chris for pointing out that the questioner was asking for the height to be set, not the width.

I think javascript is your only way of doing this...

<body onload="document.divName.style.height=(document.documentElement.clientWidth ? document.documentElement.clientWidth : window.innerWidth)*0.9">
freefaller
  • 19,368
  • 7
  • 57
  • 87
  • I believe the question asked to set the **height** relative to the viewport **width**, not height. – Red Orca Oct 25 '11 at 11:09
  • @ChrisStarnes - doh, thanks for highlight my obvious stupidity - edited my answer – freefaller Oct 25 '11 at 11:12
  • Thx a lot...I am looking at implementing something using CSS (as I'll be dynamically changing the attributes for width/height via CSS when screen size changes say from desktop to mobile to ipad)...So looking to avoid Javascript to do that.... – copenndthagen Oct 25 '11 at 11:55
  • Also, this would just set the div height on load of page...i want it to change even as the browser is resized...not sure how reliable that is to do using Javascript... – copenndthagen Oct 26 '11 at 09:46