关于CSS%高度的问题
如果我定义一个 CSS 如下；
div {height: 50%;}
这是否适用于大多数现代桌面浏览器（IE8+、FF、Safari）和移动浏览器（iPhone/iPad 等）？
是否需要指定以下 2 个附加属性来支持跨浏览器？
min-height: 50%; height: auto;
我在以下上下文中提出这个问题：流体设计（即同一页面将针对多个设备进行缩放...台式机/平板电脑/移动设备）..所以请让我知道什么应该是首选方法。
If I define a CSS as follows;
div {height: 50%;}
Will this work across most modern desktop browsers (IE8+, FF, Safari) and mobile browsers (iPhone/iPad, etc)
Is there any need to specify the following 2 additional attributes for cross-browser support
min-height: 50%; height: auto;
I am asking this question in the context of fluid design (i.e. same page will scale for multiple devices...desktop/tablet/mobile)..So please let me know what should be the preferred approach.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
不，你不需要那些。
但是：高度仅相对于父母。默认情况下，父级没有高度（更准确地说，它是其中子级的高度）。
所以你需要：
所以指定一个“起始”高度，你可能还需要保持“高度链”活动。
使用 min-height 而不是 height 的原因是高度是固定的 - 无论里面有什么，它都不能大于该高度。这可能无法正常工作。因此，人们会执行 min-height，使其至少达到他们想要的高度，但允许增长。
min-height 的问题在于它不适用于所有浏览器。
No, you don't need those.
BUT: Height is only relative to the parent. And the parent by default has no height (more accurately it's the height of the children inside it).
So you need:
So specify a "starting" height, and you may need to keep the "height chain" alive as well.
The reason for min-height instead of height is that height is fixed - it can't get bigger than that no matter what is inside it. This may not work right. So instead people do min-height so it's as least as tall as they want, but is allowed to grow.
The trouble with min-height is that it doesn't work on all browsers.