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

Question

我的问题很像这个：

两个 div，一个固定宽度，另一个，其余的

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

如果不使用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;
}

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

感谢您的考虑，伙计们。

Answer 1

我对你的小提琴做了一些细微的改动。

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

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

Answer 2

您是否尝试使用display: table,display: table-cell和display: table-row？left如果你给容器一个 table 的显示值，然后每right一个table-cell你可以将容器分成两列。

然后添加vertical-align: bottom到左侧以将内容移动到底部。您必须添加另一个元素才能获得我认为的不同背景颜色。

看到这个更新的小提琴。

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