三列溢出佈局

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

三列溢出佈局

回答

相關問題