Question

我正在尝试实现一个内容，我需要有一个100％的浏览器宽度的一部分，在其中我需要在左边的大小一个宽度为200px的div，在它是正确的我需要有一个div动态宽度取决于浏览器宽度。示例.. browser = 900px - ＆gt;左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和#grid divs。我希望有一个有效的解决方案，因为稍后我会在#grid div中做同样的事情：）

先谢谢你，丹尼尔！

Answer 1

你可以用CSS做到这一点。诀窍是使用float（左div）和非浮动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;    
}

Answer 2

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

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

两列，左边有固定宽度，右边有动态宽度

2 个答案: