2011-03-09 143 views
2

我一直在搜索整個上午,而找不到解決方案以解決特定問題。我有一個佈局,其左列設置爲大約50px,右列設置爲佔用頁面的剩餘100%。這部分工作。DIV填充寬度爲100%的容器的剩餘寬度

現在,在右欄中,我有另外2列布局。但是因爲容器的寬度是100%,所以我的內右列不斷擴大,超過它的父項。我需要它來填充剩餘空間,類似於父級佈局。我用我的示例代碼創建了一個jsFiddle。

http://jsfiddle.net/87nb2/1/

正如你所看到的,綠色的「畫廊」部分即將過去的右側它的父。這是我試圖解決的問題。

回答

2

你擁有它的那一刻的樣子,我想你需要做的是:

  • #gallery,改變width: 100%right: 0
  • 這是有效的,因爲一個元素可以同時具有leftright屬性。

Live Demo


您可能還希望將left值調整爲50px,避免切斷一些左元素:

Live Demo

+0

是!正確設置:0解決了問題。非常感謝。 – Gregg 2011-03-09 16:40:56

0

http://jsfiddle.net/87nb2/14/

#filmstrip_nav { 
    float:left; 
    height: 94%; 
    width: 50px; 
    background-color:red; 
} 

#gallery { 
    overflow: auto; 
    height: 94%; 
    background-color: green; 
    width: 100% 
    float:left; 
}