Question

我正在寻找CSS布局方面的帮助。我似乎无法得到它我想要的。这是我正在寻找的图像。

我不能让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

为什么你使用“位置：绝对？移除位置，左，右bla bla和

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

使用此CSS代码...

三列OverFlow布局

1 个答案: