css - 指定的最小高度和 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

可能有更简洁的方法，但关于最小高度的一个想法浮现在脑海中(无论如何 IE<8 都不会解释最小高度):

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

水平宽度应该也是如此。

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

不要忘记您的 HTML 元素需要 height: 100% 才能在 body 内使用 height: 100%。