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

Question

我正在尝试实现一个内容，其中我需要有一个100%浏览器宽度的部分，在它里面，我需要在左边有一个200px宽度的div，在右边我需要一个根据浏览器宽度动态宽度的div。实例browser=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;
}

现在我需要用css处理#list和#griddiv。我希望有一个有效的解决方案，因为稍后我将在#griddiv中做同样的事情：）

提前谢谢你，丹尼尔！

Answer 1

你可以用CSS来实现。诀窍是使用一个float（左边的div）和一个非float（右边的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;    
}

​

Answer 2

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

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