CSS：两列（固定/流动） - 相同高度答案

【问题标题】：CSS: two colums (fixed/fluid) - same heightCSS：两列（固定/流动） - 相同高度
【发布时间】：2009-12-04 19:48:36
【问题描述】：

做这个简单的事情最好的方法是什么？

左栏，固定宽度，背景为黄色
主列，屏幕的其余部分

主列将包含不定长度的文本，无论内容是什么，我都希望左列与主列一样高。没有页眉，没有页脚，只是屏幕一分为二，但左边必须填满主程序占用的所有空间。没有 JavaScript。

谢谢。

编辑：这个（非常基本的布局）可以在没有背景图像或荒谬边距值之类的技巧的情况下完成吗？我正在尝试摆脱被鄙视的表格方法，但到目前为止，我发现仅 CSS 的布局即使是做最简单的事情也总是需要一些技巧。

【问题讨论】：

这应该移到doctype.com，对吧？
@Josh Pearce：虽然 doctype.com 属于正义联盟，但它并未直接与 StackOverflow 系列网站集成。所以我们不能把它移到那里。

标签： css layout two-columns

【解决方案1】：

【讨论】：

【解决方案2】：

我通常有两个 div：外部 div 包含我希望与主列具有相同高度的侧边栏内容，内部 div 将是主列。

-----------------------------
|      -------------------- |
|      |                  | |
|      |                  | |
|      |                  | |
|      -------------------- |
-----------------------------

这样，内部/主 div 会强制外部/侧边栏 div 与内部/主 div 具有相同的高度。只需float:right 内部/主 div，将外部/侧边栏 div 设置为 width:100%，并指定内部/主 div 有一个左边距，以允许侧边栏，例如margin-left:20%.

<div class="outer">
  <div class="inner">
    --main content--
  </div>
  --sidebar content--
</div>

更新：抱歉，我的侧边栏内容显示在错误的位置。它应该在内部/主 div 下方，以便内部/主 div 在浮动时显示在其右侧。示例 CSS：

div.outer {
  width: 100%;
}

div.inner {
  margin-left: 20%; /* width of sidebar */
  float: right;
}

【讨论】：

无法显示我需要的内容，能否提供样式表示例？
我认为你想添加：height:100%; div.inner 也是如此。
我怀疑这行得通。 width=100% 会将外部 div 打到内部下方。你需要的不止这些。
你是对的，dland：侧边栏/外部内容确实显示在内部/主要内容的左侧，但它也被推到它的下方。

【解决方案3】：

所以基本上“可以不用技巧就可以做到”这个问题的答案是：不。

【讨论】：

【解决方案4】：

这是一个 QUICK 模型。主列在您使用时水平填充。如果您已经知道左列宽，则可以设置主列宽。

<html>
<head>
<style>
#leftCol
{
width:350px;
height:100%;
float:left;
background-color:#FFFF33;
}
#mainCol
{
width:53%;
height:100%;
float:left;
background-color:#CC0033;
}
#wrapper
{
width:100%;
}
.clearFix
{
clear:both;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="leftCol">tfgsrrtgrt

</div>
<div id="mainCol">gtrgdrtgthdyhtyhtyhydthtr

</div>
<div class="clearFix"></div>
</div>
</body>
</html>

希望这对你有用。

【讨论】：

请注意，如果浏览器宽度受到限制，mainCol 将包裹在 leftCol 下方，这可能是不可取的
正确。忘了那个。然后我们需要在某个地方设置一个最小宽度……也许在#wrapper 或#mainCol 中？