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

Question

我开始创建基于我的HTML / CSS布局这个文章，是更多/更少成功。 但是，我认为我把CSS弄乱了，因为该页面在IE或Chrome / Firefox中的显示方式不同。

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

这是我的布局草图

您可以在此处查看我当前的结果。 如果您在Chrome / Firefox中查看此页面，则可以看到内容divs正在“渗出”我的页面，但是，在IE中，内容divs非常合适（我在内容divs了边框仅用于测试目的）。 我不相信IE能够正确呈现我的CSS，而是相信我的CSS做错了，但确实不确定。 感谢您对此的任何帮助。

Answer 1

您将高度设置为100％，但同时也设置了填充/边距等，该高度是内部高度，并且填充/边距/边界将添加到其中，从而导致溢出。

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