跨浏览器兼容的CSS液体布局，3列100％宽度/高度

Question

我开始根据this文章创建我的HTML / CSS布局，并且/或者更不成功。但是，我认为我用我的css搞砸了，因为这个页面在IE或Chrome / Firefox中不会以相同的方式显示...

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

这是我的布局草图

您可以看到我当前的结果here。如果您在Chrome / Firefox中查看此页面，您可以看到内容divs在我的页面中“流血”，但是，在IE内容中divs非常适合（我在内容{{1}上添加了边框仅用于测试目的）。我不相信IE正确地渲染我的CSS，而是我相信我的CSS做错了，但真的不确定是什么。感谢您的帮助。

Answer 1

您设置的高度为100％，但也设置了填充/边距等，高度是内部高度，填充/边距/边框将添加到此，从而导致溢出。

编辑：将填充/边距/边框设置为百分比，使它们+高度加起来达到100％或使用javascript计算像素appropriatley告诉您窗口高度（以像素为单位），以便您确定每列的正确高度。您可以随时在调整窗口大小时触发此操作，以充当css中的100％规则。