Question

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

需要：

固定宽度300px左栏
填满的右栏页面的其余部分 - 无论如何窗口大小
两个列div必须触及页面底部

我遇到麻烦的是第三个要点，如果我使用了浮点数，那么右列总是会在左栏下面包裹，而我无法让它们在页面底部齐平！

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

有什么想法吗？谢谢！

Answer 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>

Answer 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>

无法使两列布局工作

2 个答案: