css - 具有 3 列 100% 宽度/高度的跨浏览器兼容 CSS 液体布局

Question

我开始根据 this 创建我的 HTML/CSS 布局文章并且或多或少地成功了。但是，我认为我的 css 在某处搞砸了，因为此页面在 IE 或 Chrome/Firefox 中的显示方式不同...

基本上，我的想法是有 3 个等宽的列，高度为 100%。每列的内容应在左侧、顶部和右侧有一些填充，“主要”链接应位于每列的底部，并在其列的中心对齐。

这是我的布局草图

可以看到我现在的结果here .如果您在 Chrome/Firefox 中查看此页面，您可以看到内容 divs 从我的页面中“渗出”，但是，在 IE 中内容 divs 非常适合(我将边框在内容 divs 上仅用于测试目的)。我不相信 IE 正确地呈现了我的 CSS，而是我相信我的 CSS 做错了什么，但真的不确定是什么。感谢您对此提供的任何帮助。

Answer 1

您将高度设置为 100%，还设置了内边距/边距等，高度是内部高度，内边距/边距/边框将添加到此，从而导致溢出。

编辑:要么将填充/边距/边框设置为百分比，以便它们 + 高度加起来为 100%，要么使用 javascript 适本地计算像素以告诉您窗口高度(以像素为单位)，以便您确定每列的正确高度。你总是可以在调整窗口大小时触发它，就像 css 中的 100% 规则一样。