CSS 设置div高度的CSS表达式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7888148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS expression to set height of div
提问by testndtv
I want to set the height of a div based on CSS expression.
我想根据 CSS 表达式设置 div 的高度。
Basically it should be set as some % (say 90%) of the viewport widthI tried the following, but is not working;
基本上它应该设置为视口宽度的%（比如 90%） 我尝试了以下操作，但不起作用；
height:expression(document.documentElement.clientWidth ? document.documentElement.clientWidth : window.innerWidth );
I am looking at a cross-browser way of doing this (IE7+, FF4+, Safari)
我正在寻找一种跨浏览器的方式（IE7+、FF4+、Safari）
回答by Spudley
CSS expressions are not supported anywhere except IE (and are considered a bad idea even there).
除了 IE 之外的任何地方都不支持 CSS 表达式（即使在那里也被认为是一个坏主意）。
However, there isn't really another way of doing what you're asking, at least not using just CSS.
但是，并没有真正的另一种方式来做你所要求的，至少不是只使用 CSS。
The only alternative is to use Javascript, and this is what I think you're going to have to do.
唯一的选择是使用 Javascript，这就是我认为你将不得不做的。
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.
事实上，IE 的 CSS 表达式本身就是 Javascript，它允许非常强大的表达式，但也有去除布局和脚本抽象的负面影响。这就是他们不赞成的原因，但在某些用例中，例如您的纯布局需要某种形式的表达。
As I say, there really isn't any answer for you right now in CSS.
正如我所说，现在在 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.
未来可能会有一些希望，因为谷歌目前正在试验一些对 CSS 的增强，其中包括变量。关于它的文章：http: //johanbrook.com/design/css/webkit-css-variables-mixins-nesting/。但是，我不确定这是否会允许您需要的那种表达式。
So possibly this is something that might continue needing needing Javascript into the future. It certainly does for now, either way.
所以这可能是未来可能继续需要 Javascript 的东西。无论哪种方式，它现在都可以。
回答by freefaller
You're combining CSS and javascript, which will not work.
您正在结合 CSS 和 javascript，这将不起作用。
You either want to just set height:90%;(which will do 90% of the width of the parentelement, not the page - unless the div is at the root of the page).
您要么只想设置height:90%;（这将设置父元素宽度的 90% ，而不是页面 - 除非 div 位于页面的根部）。
Otherwise you should create a javascript block (preferably as part of an onload script), e.g... (not tested)
否则，您应该创建一个 javascript 块（最好作为 onload 脚本的一部分），例如..（未测试）
<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.
编辑- 感谢@Chris 指出提问者要求设置高度，而不是宽度。
I think javascript is your only way of doing this...
我认为 javascript 是你做到这一点的唯一方法......
<body onload="document.divName.style.height=(document.documentElement.clientWidth ? document.documentElement.clientWidth : window.innerWidth)*0.9">
