固定div右侧的div高度

Question

我有任何用于显示项目详细信息的 div（class main）。 现在我需要 2 列。 右左。 我需要用30px width和height 100% & 'auto' 修复右边的 div 并fix in right 。 左列height:auto和overflow:hidden 。

Html：

<div class="main">
<div class="right">
</div>
<div class="left">
.... Descripton .....
</div>
<div>

CSS：

.main {width:300px; height:auto; overflow:hidden;margin:0 auto;}
.right{width:30px; float:right; height:auto; background-color:#e1e1e1; }
.left{width:270px; float:right; height:auto;}

在线演示我的问题：在这里，我没有看到带有背景色的正确 div：#e1e1e1；

我需要这个：这里

谢谢。

Answer 1

您应该使用绝对位置 (position:absolute)。

float:right/left 是一种滥用

<div style="position:relative;width:300px; height:200px;margin:0 auto; background-color:#00ff00;">
 <div style="position:absolute; right:0; top:0;background-color:#ff0000;color:#000;">  Your right content
  </div>
  &nbsp;
  <div style="position:absolute; left:0; top:0;background-color:#0000ff;color:#000;">
    Left content
  </div>
</div>

Answer 2

所以我相信你想把 2 列彼此分开，右列的背景是浅灰色的。

它们的高度都应为 100%。 为了使内容 100% 高，我们需要将html和body标签也设置为 100%。

我相信这个 jsfiddle 可以满足您的需求。 不好意思把背景颜色改了一下，我把左边的栏设置成overflow: auto来测试。

Answer 3

这是一个示例： http://jsfiddle.net/fbUQB/ 。 这就是你要求的，不是吗？