CSS列不擴展/顯示

Question

我有一個middleContent div有兩個子div作爲列。 middleMain div工作正常，middleRight div不會顯示，除非我填充一些內容或使用絕對定位。

這是我的頁面的圖片： http://imageshack.us/photo/my-images/403/tempzk.jpg/

用下面的CSS：

#middleContent 
{ 
    position:relative; 
    min-height:500px; 
    height:auto; 
} 

#middleMain 
{ 
    float:left; 
    height:100%; 
    left:0; 
    right:auto; 
} 

#middleRight 
{ 
    position:absolute; 
    float:right; 
    width:100px; 
    height:100%; 
    right:0; 
    background-color:Orange; 
    top: 0px; 
} 

不過，我需要用它來相對定位，因爲高度依賴於middleMain內容展開工作。 MiddleRight沒有任何內容（但需要添加內容的能力，所以我不能只使用圖片），所以我基本上需要顯示一個空白的div（但有背景色），佔用整個頁面。

Answer 1

你的CSS更改爲：

#middleContent 
    { 
     position:relative; 
     min-height:500px; 
     height:auto; 

     overflow: hidden; 
    } 

    #middleMain 
    { 
     float:left; 
     height:100%; 
     left:0; 
     right:auto; 
    } 

    #middleRight 
    { 
     position:relative; 
     float:right; 
     width:100px; 
     height:100%; 
     right:0; 
     background-color:Orange; 
     top: 0px; 

     padding-bottom: 9000px; 
     margin-bottom: -9000px; 
} 

http://jsfiddle.net/fXHqL/1/

Answer 2

添加此行#middleRight

display:block; 

它應該工作。