指定的最小高度和 100% 高度一起

Question

我一直在网上搜寻我的 CSS 噩梦问题的答案。

主要问题似乎是在所有浏览器中同时获得 min-height:580px 和 height:100%。

我需要实现的是：

1. 站点的最小高度为 580 像素（包括页脚），因此滚动条出现之前的总高度为 580 像素。
2. 此外，需要 930 像素的最小宽度，包括每边 15 像素的左右边距。
3. 216 像素宽和 100% 高的左侧菜单减去 30 像素的页脚高度。
4. 屏幕的主要部分应填满所有可用空间。除非屏幕高度小于 580px 或宽度小于 930px。在这种情况下，您会看到滚动条。
5. 兼容 ie6、7、8、Firefox 和 Safari。

可以不使用 Javascript 来完成吗？

Answer 1

首先，在没有 javascript 的情况下，IE6 或 IE7 不支持 min-height。所以你的问题的答案是否定的。

一般来说，虽然（我承认我不确定，因为我没有彻底测试过），但我似乎记得 height:100% 会覆盖浏览器中以像素为单位设置的 min-height 属性支持一下。

您可以尝试在 100% 高度 div 内部或外部使用第二个 div，即您需要的 580px...

Answer 2

可能有更简洁的方法，但是想到了一个关于最小高度的想法（IE

在屏幕左下角放置一个绝对定位、1 像素宽、不可见的 DIV。给它 580 像素的高度。 这应该使高度至少为 580 像素。

水平宽度应该也可以。

然后您应该能够以通常的方式操作菜单部分。

不要忘记您的 HTML 元素需要 height: 100% 才能在 body 中工作 height: 100%。