css - 三列溢出布局

Question

我正在寻求有关 CSS 布局的帮助。我似乎无法得到我想要的。这是我正在寻找的图片。

Required Layout Image

我无法让 div2 填充它的部分，而溢出在左栏的底部可见。这是我用来显示我所在位置的代码。请一些帮助会很棒!我希望针对 IE6+

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: auto;
}
.leftContent {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  width: 250px;
  height: 100%;
  color: #333;
  border: red ridge;
  background: blue;
  overflow: hidden;
}
.centreContent {
  margin-left: 254px;
  margin-right: 1px;
  margin-bottom: 20px;
  color: #333;
  background: green;
  border: red ridge;
  padding: 0 0px;
  height: 100%;
}
.rightContent {
  position: absolute;
  right: 20;
  top: 0;
  padding: 0;
  width: 100px;
  color: #333;
  background: black;
  border: red ridge;
}
.div1 {
  border: black solid;
}
.div2 {
  overflow: auto;
  height: 100%;
  border: black solid;
}

<!-- Start Left Column-->
<div id="leftColumn" class="leftContent">
  <div id="div1" class="div1">
    CONTENT
  </div>
  <div id="div2" class="div2">
    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
    CONTENT CONTENT
  </div>
</div>
<!-- End Left Column-->

<!-- Start Centre Column-->
<div id="centreColumn" class="centreContent">
  CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
</div>
<!-- End Centre Column-->

<!-- Start Right Column-->
<div id="rightColumn" class="rightContent">
  CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
</div>
<!-- End Right Column-->

感谢您的帮助。

Answer 1

为什么要使用 "position: absolute ？移除position, left, right bla bla and

.leftContent { float:left;}
.centreContent  {float:left;}
.rightContent {float:right;}

使用这个 CSS 代码...