3

我想根据 CSS 表达式设置 div 的高度。

基本上它应该设置为视口宽度的百分之几（比如 90%） 我尝试了以下，但不起作用；

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

我正在寻找一种跨浏览器的方式（IE7+、FF4+、Safari）

4

2 回答 2

14

CSS 表达式在除 IE 之外的任何地方都不受支持（即使在那里也被认为是一个坏主意）。

但是，实际上没有其他方法可以满足您的要求，至少不只使用 CSS。

唯一的选择是使用 Javascript，我认为这是你必须要做的。

事实上，IE 的 CSS 表达式本身就是 Javascript，允许相当强大的表达式，但也有去除布局和脚本抽象的负面影响。这就是为什么他们不赞成的原因，但是在像您这样的用例中，纯布局需要某种形式的表达。

正如我所说，现在在 CSS 中确实没有任何答案适合您。

未来可能会有一些希望，因为谷歌目前正在尝试对包含变量的 CSS 进行一些增强。关于它的文章在这里：http: //johanbrook.com/design/css/webkit-css-variables-mixins-nesting/。但是，我不确定这是否会允许您需要的那种表达方式。

所以这可能是未来可能继续需要 Javascript 的东西。不管怎样，现在肯定是这样。

于 2011-10-25T11:06:20.597 回答
0

您正在结合 CSS 和 javascript，这是行不通的。

您要么只想设置height:90%;（它将完成父元素宽度的 90%，而不是页面 - 除非 div 位于页面的根部）。

否则，您应该创建一个 javascript 块（最好作为 onload 脚本的一部分），例如..（未测试）

<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">
于 2011-10-25T11:06:45.833 回答