无法让两列布局工作答案

【问题标题】：Cant get two column layout to work无法让两列布局工作
【发布时间】：2011-08-26 12:56:13
【问题描述】：

我正在尝试制作一个简单的两列布局，但它似乎比我想象的要难..

它需要有：

固定宽度 300 像素左列
填满页面的其余部分 - 不管是什么窗口大小
两个列 div 都必须接触页面底部

我遇到的问题是第三个要点，如果我使用浮点数，那么右列将始终包裹在左列下方，我无法让它们都与页面底部齐平！

我认为我需要浮动左列，因为将右列设置为 100%-300px 是不可能的。

有什么想法吗？谢谢！

【问题讨论】：

标签： html css layout css-float

【解决方案1】：

CSS：

#main, * html #left, * html #right { display:inline; height:100% }
#main { display:table }
#left, #right { display:table-cell }
#left { width:300px }

* html #left 用于 IE，所以它被强制使用display:inline; height:100%。 IE 好像不支持display:table-cell。

HTML：

<div id="main">
    <div id="left"></div>
    <div id="right"></div>
</div>

【讨论】：

【解决方案2】：

试试这个 - 在 IE6+ 上测试并且可以工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    html, body {height:100%;position:relative;margin:0;padding:0;}
.side {float:left;width:300px;height:100%;background:red;}
.main {margin-left:300px;background:blue;height:100%;}
    </style>
</head>
<body>
<div class="side">
       side content
</div>
<div class="main">
    content
</div>
</body>
</html>

【讨论】：

在这种情况下，为您的 div 使用 id 而不是类更为明显。
当我将超过一页的文本放入 .main 时，div 不会展开并且背景停止。
@Jleagle 好吧，您没有指定。你可以试试那个line25.com/articles/… 的假列 - 稍微定制一下它应该可以工作。
@Midas 这并不重要 - 问题是关于布局而不是关于 id 和类 - 如果他问这样的问题，我假设他已经对 css 有基本的了解。