CSS - 两个 Div 固定并填充但绝对位置

Question

我的问题很像这个:

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

但有一些警告使答案有点不同。

如果不使用 javascript，有没有办法让两个包含的 div，一个以锁定的宽度 float ，另一个以设定的高度固定在容器底部并占用剩余的可用宽度？这里的困难部分是两个 div 上方和周围的所有内容都必须保持可点击并与父 div 相关联。

这是 fiddle :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;
}

红色区域需要是可访问的父 div，黄色需要位于底部，以便在调整窗口大小时占据剩余的宽度。

谢谢大家的考虑。

Answer 1

I made some slight changes to your fiddle.

通过删除宽度，而不是设置左右位置，div 将自动填充这两点之间的空间。因为您的右侧 div 是固定宽度，所以您可以将左侧 div 的右侧位置设置为该数字加上您想要的 div 之间的任何间隙(以及您在左侧创建的任何间隙)。

position: absolute 不会否定元素与其父元素之间的关系。