关于 CSS % 高度的问题答案

【问题标题】：Question on CSS % height关于 CSS % 高度的问题
【发布时间】：2011-09-28 07:50:11
【问题描述】：

如果我定义一个 CSS 如下；

div {height: 50%;}

这是否适用于大多数现代桌面浏览器（IE8+、FF、Safari）和移动浏览器（iPhone/iPad 等）

是否需要为跨浏览器支持指定以下2个附加属性

min-height: 50%; height: auto;

我是在流畅设计的背景下提出这个问题的（即，同一页面将适用于多种设备...台式机/平板电脑/移动设备）。所以请告诉我应该首选哪种方法。

【问题讨论】：

【解决方案1】：

不，你不需要这些。

但是：高度仅相对于父级。并且默认情况下父级没有高度（更准确地说是它里面的孩子的高度）。

所以你需要：

body,html { height: 100%; }

所以指定一个“起始”高度，您可能还需要保持“高度链”处于活动状态。

使用 min-height 而不是 height 的原因是高度是固定的 - 无论里面有什么，它都不能变得更大。这可能无法正常工作。因此，人们改为使用 min-height，使其尽可能高，但允许增长。

min-height 的问题在于它不适用于所有浏览器。

【讨论】：

非常感谢...所以在 % val 中仅使用“高度”属性，相同的页面是否可以很好地适用于多个设备...桌面/平板电脑/移动设备？
高度无法缩放。所以不行。不同的机器具有不同的高度，因此您的内容将适合某些机器而不适合其他机器。为什么还要指定高度？
我正在尝试创建一个流畅的布局。所以无法在固定/像素值中指定任何内容...我们确实需要在很多地方明确指定“高度”属性（例如，对于某些溢出）...所以我的问题是这个 % 高度可以跨多个平台工作吗？
高度是相对于设备的高度。我很怀疑内容的高度与设备的高度有什么关系！您绝对可以将 px 值用于流体布局！如果您的内容的大小是固定的（即固定数量的行或字母），则将高度指定为固定的。如果您事先不知道高度，则不指定任何内容并让浏览器决定。你说它会“工作”，但你没有定义“工作”。当然，它将在固定高度方面起作用。但我怀疑那是你真正想要的。