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。

由于您没有在您的问题中提及您需要填写哪些内容，我不确定这是否符合您的需求。