CSS - 兩個div固定和填充但絕對位置

Question

我的問題是很多像這樣的：

Two divs, one fixed width, the other, the rest

但也有一些注意事項，使答案有點不同。

沒有使用javascript，有沒有辦法讓兩個包含的div，一個浮動在一個鎖定寬度的權利，另一個堅持容器的底部設置的高度，並採取剩餘的可用寬度？這裏最困難的部分是上面的所有內容，並且圍繞這兩個div必須保持可點擊並與父div關聯。

這裏是小提琴：http://jsfiddle.net/W7Ljd/

下面是代碼：

.box { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    padding: 5px; 
    background:lightcoral; 
} 

.left { 
    position: absolute; /* ------ Get Rid of these lines */ 
    bottom: 5px;  /* ------ */ 
    width: 80px;  /* ------ */ 
    overflow:hidden; 
    height: 20px; 
    background: lightyellow; /* Take up rest of space */ 
} 

.right { 
    float: right; 
    width: 100px; 
    height: 100%; 
    background: lightblue; 
} 

紅色區域需要爲可訪問父格，黃需要在底部佔用的其餘窗口的寬度應該調整大小。

感謝您的考慮，夥計們。

Answer 1

I made some slight changes to your fiddle.

通過除去寬度，而不是設置一個左和右位置，在div會自動填入這兩個點之間的空間。因爲你的右邊div是一個固定的寬度，你可以在左邊的div上設置正確的位置加上你想要的div之間的任何間隙（以及你在左邊創建的任何間隙）。

position: absolute並不否定元素與其父項的關係。

Answer 2

您是否嘗試過使用display: table,display: table-cell和display: table-row？如果您向容器顯示錶格的值，然後每個left和right的值爲table-cell，則可以將容器分成兩列。

然後將vertical-align: bottom添加到左側將內容移動到底部。您必須添加另一個元素才能獲得我認爲不同的背景顏色。

看到這個updated fiddle。

由於您沒有在您的問題中提及您需要填寫哪些內容，我不確定這是否符合您的需求。