CSS表达式设置div高度

Question

CSS表达式设置div高度

3

我想通过CSS表达式来设置div的高度。

基本上它应该设置为视口宽度的一定百分比（比如说90%）。我尝试了以下代码，但并不起作用：

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

我正在寻找一种跨浏览器的方法来实现这个（IE7+，FF4+，Safari）

- copenndthagen

2

我建议使用JavaScript，而不是CSS。您不能使用JavaScript的原因是什么？出于好奇，为什么高度需要与视口宽度相关联？ - Red Orca

好的，那么为什么我不能使用JavaScript呢？因为我正在使用一种称为响应式/流体设计的东西，它主要使用CSS在不同的屏幕尺寸上呈现相同的HTML...而且对于第二部分，高度与视口宽度相关是因为我使用了一些CSS变换来旋转文本，所以高度是基于父元素宽度计算的...希望我能够澄清...我知道这有点难以理解，这就是为什么我一开始没有指定它的原因。 - copenndthagen

@testndtv - 这实际上是想要做你所问的事情的一个非常好的理由（我也很好奇）。现在我有了更多的信息，我可能会再挖掘一下，看看是否有其他方法可以解决你的问题。 - Spudley

@Spudley - 是的，我正在考虑避免在我的项目中使用JS...我知道可以使用JS来完成，但这可能会给我带来问题，特别是在尝试在不同的屏幕尺寸下切换不同样式时... 迫切希望能有一些使用CSS的解决方案... - copenndthagen

一直在寻找，但还没有找到任何东西。觉得可能有一种方法可以缩放旋转的元素以适应其父元素（这可能是您尝试做的另一种方式），但甚至无法找到那个方法。 - Spudley

2个回答

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

- freefaller

我认为问题要求将高度相对于视口宽度设置，而不是高度。 - Red Orca

@ChrisStarnes - 哦，谢谢你指出我的明显愚蠢 - 我编辑了我的答案。 - freefaller

非常感谢...我正在考虑使用CSS实现某些功能（因为当屏幕尺寸从桌面电脑变化到移动设备或iPad时，我将通过CSS动态更改宽度/高度属性）...因此希望避免使用JavaScript来完成这个任务... - copenndthagen

此外，这只会在页面加载时设置div高度...我希望它在浏览器调整大小时也能改变...不确定使用Javascript实现的可靠性如何... - copenndthagen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Spudley · Accepted Answer

CSS表达式除了在IE中被支持之外，其他地方都不支持（即使在那里，它们也被认为是一个坏主意）。

然而，如果只使用CSS的话，没有真正的另一种方法来实现你所要求的内容。

唯一的替代方案是使用JavaScript，我认为这就是你将要做的事情。

事实上，IE的CSS表达式本身就是JavaScript，它允许相当强大的表达式，但也存在删除布局和脚本抽象层的负面效果。这就是为什么人们对它们不满意，但像你这样的情况需要一些形式的纯布局表达式。

正如我所说，现在CSS中真的没有任何答案适用于你。

未来可能有一些希望，因为Google目前正在尝试一些增强CSS的功能，包括变量。有关此功能的文章在这里：http://johanbrook.com/design/css/webkit-css-variables-mixins-nesting/。但是，我不确定即使使用这个功能也能够满足你所需要的那种表达式。

因此，可能这是一件可能需要在未来继续需要JavaScript的事情。无论如何，现在肯定需要。