CSS выражение для установки высоты div - PullRequest
Новая
       16

CSS выражение для установки высоты div

3 голосов
/ 25 октября 2011

Я хочу установить высоту div на основе выражения CSS.

В основном это должно быть установлено как некоторые% (скажем, 90%) от области просмотра ширина Я пробовал следующее, но не работает; 

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

Яглядя на кросс-браузерный способ сделать это (IE7 +, FF4 +, Safari)

Ответы [ 2 ]

13 голосов
/ 25 октября 2011

CSS-выражения не поддерживаются нигде, кроме IE (и даже там считаются плохой идеей).

Однако на самом деле нет другого способа сделать то, что вы просите, по крайней мере, не использовать только CSS.

Единственная альтернатива - использовать Javascript, и это то, что, я думаю, вам придется сделать.

Фактически, CSS-выражения IE сами по себе являются Javascript, который допускает довольно мощные выражения, но также имеет отрицательный эффект от удаления абстракции макета и скрипта. Вот почему они недовольны, но есть случаи использования, такие как ваш, когда чистый макет требует некоторой формы выражения.

Как я уже сказал, в CSS на самом деле нет ответа для вас.

Может быть некоторая надежда на будущее, поскольку Google в настоящее время экспериментирует с некоторыми улучшениями CSS, которые включают переменные. Статья об этом здесь: http://johanbrook.com/design/css/webkit-css-variables-mixins-nesting/. Тем не менее, я не уверен, позволит ли даже это разрешить те выражения, которые вам нужны.

Так что, возможно, это то, что может нуждаться в Javascript в будущем. Это, безусловно, пока что так или иначе.

0 голосов
/ 25 октября 2011

Вы комбинируете CSS и javascript, который не будет работать.

Вы либо просто хотите установить height:90%; (что будет делать 90% ширины родительского элемента, а не страницы - если только div не находится в корне страницы).

В противном случае вам следует создать блок javascript (желательно как часть сценария загрузки), например .. (не проверено) 

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

Редактировать - Спасибо @Chris за то, что он указал, что спрашивающий спрашивает, какую высоту нужно задать, а не ширину.

Я думаю, что javascript - ваш единственный способделает это ... 

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