两列，左侧为固定宽度，右侧为动态宽度答案

【问题标题】：Two columns, left with fixed width, right with dynamic width两列，左侧为固定宽度，右侧为动态宽度
【发布时间】：2012-07-30 16:06:48
【问题描述】：

我正在尝试实现一个内容，我需要有一个浏览器宽度的 100% 的部分，并且在其中我需要在左边有一个宽度为 200px 的 div，而在右边我需要有一个 div动态宽度取决于浏览器的宽度。示例 .. 浏览器 = 900px -> 左 div 200px 右 div 700px。并且两个 div 都具有动态高度，具体取决于我在其中放入了多少信息 .. 包装器 div 将采用这 2 个 div 高度中最大的一个..

到目前为止，我做了这样的事情 html

<section id="wrapper">
  <div id="list">
  </div>
  <div id="grid">
  </div>
</section>

css

#wrapper {
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
    overflow: hidden;
}

现在我需要对#list 和#grid div 进行css。我希望有一个有效的解决方案，因为稍后我将在#grid div 中做同样的事情:)

提前谢谢你，丹尼尔！

【问题讨论】：

标签： css html

【解决方案1】：

您可以使用 CSS 来实现。诀窍是使用浮动（左侧 div）和非浮动 div（右侧）。左侧（浮动）div也需要有一个最小高度，否则如果左侧没有任何内容，右侧（非浮动）div将占据左侧列的空间。

编辑：右边<div>也应该有以下规则：

overflow: hidden;
display: block;

overflow: hidden 使右侧 div 表现为一列，否则其内容将围绕左侧 div 流动。

请注意，#wrapper 不需要宽度，因为 <div> 的默认宽度是 100%（因为您说它将占据浏览器窗口的整个宽度），并且还删除了它的边距。

这是一个示例（为了非 HTML5 浏览器，我将 <section> 更改为 <div>，但它的工作原理相同）。

我放置了背景颜色来区分所有元素。

http://jsfiddle.net/pmv3s/1/

这里是全屏版：http://fiddle.jshell.net/pmv3s/1/show/light/

CSS：

#wrapper {
    padding: 40px 0;
    overflow: hidden;
    background-color: red;
    min-height: 5px;
}
#list {
    float: left;
    width: 200px;
    background-color: green;
    overflow: hidden;
    min-height: 100px;
}
#grid {
    display: block;
    float: none;
    background-color: blue;  
    min-height: 100px;
    overflow: hidden;    
}

【讨论】：

这只是创建了一个具有设定高度的浮动框。如果另一列（右列）的高度比左列大，则内容将围绕该框浮动，并且该框将按此显示。左上角的一个小盒子。
@Tom 是真的，但是 OP 并没有要求相同高度的内部 div，是吗？他说the wrapper div will take the *biggest* of those 2 div height
“浮动”在左框的右侧和下方，这不是 OP 的要求
@Tom 你说得对，我忘了将overflow: hidden 添加到正确的 div 中，检查我的 jsfiddle，感谢您的提醒 :)
没问题 :) ..感谢您提供纯 CSS 解决方案 ^^ +1

【解决方案2】：

这里有一个使用一点 jQuery 的解决方案，因为我不认为有一个纯 CSS 解决方案可以解决您的问题（但我可能错了）。

http://fiddle.jshell.net/L32uj/

【讨论】：