设置 div 高度的 CSS 表达式答案

【问题标题】：CSS expression to set height of div设置 div 高度的 CSS 表达式
【发布时间】：2011-10-25 10:51:49
【问题描述】：

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

基本上它应该设置为视口宽度的百分之几（比如90%）我尝试了以下方法，但无法正常工作；

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

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

【问题讨论】：

我建议为此使用 Javascript，而不是 CSS。你不能使用Javascript有什么原因吗？出于好奇，为什么高度需要与视口宽度相关联？
Ok..所以要回答为什么我不能使用 Javascript 是因为我正在使用一种称为响应式/流体设计的东西，它主要使用 CSS 在不同的屏幕尺寸上以不同的方式呈现相同的 HTML ......与视口宽度相关的高度的第二部分是我用来旋转文本的一些 CSS 变换的 bcoz，因此高度是根据父元素宽度计算出来的......希望我能够澄清......我知道这是一个有点难以理解，这就是为什么我没有在第一名指定它..
@testndtv - 这实际上是想要做你要求的事情的一个很好的理由（我也很好奇）。现在我得到了更多信息，我可能会进一步挖掘，看看是否有其他方法可以为您解决问题。
@Spudley - 是的，我正在考虑避免使用 JS，因为我正在做的事情......我知道可以使用 JS 来完成，但可能会给我带来问题，尤其是在尝试切换到不同的不同屏幕尺寸的样式...非常期待使用CSS的东西...
一直在寻找，但还没有找到任何东西。认为可能有一种方法可以缩放旋转元素以适合其父元素（这可能是您尝试做的另一种方式），但甚至找不到。

【解决方案1】：

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

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

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

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

正如我所说，目前在 CSS 中确实没有任何答案。

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

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

【讨论】：

好吧..至少对于 IE，我如何使 CSS 表达式起作用？
CSS 表达式仅适用于 IE 至 IE7。它们被从 IE8 中删除，因为它们是非标准的。（此处的文档：msdn.microsoft.com/en-us/library/…）

【解决方案2】：

您将 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">

【讨论】：

我相信问题要求设置相对于视口 width 的 height，而不是 height。
@ChrisStarnes - 哦，谢谢你突出我明显的愚蠢 - 编辑了我的答案
非常感谢...我正在考虑使用 CSS 实现一些东西（因为当屏幕尺寸从桌面更改为移动设备再到 ipad 时，我将通过 CSS 动态更改宽度/高度的属性） ...所以希望避免使用 Javascript 来做到这一点....
另外，这只会设置页面加载时的 div 高度...我希望它即使在调整浏览器大小时也能改变...不确定使用 Javascript 这样做有多可靠.. .