三列溢出布局

我在寻找一些帮助，我的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-->

感谢您的帮助。

来源

2010-02-05 Lukie

也许这将帮助：HTTP：// v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/ – 2010-02-05 07:38:58

为什么你正在使用“的位置：绝对删除位置，左，右喇嘛喇嘛和

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

使用这个CSS代码...

来源

2010-02-05 12:55:15 Amad

三列溢出布局

回答

相关问题