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

【问题标题】：CSS - Two Divs fixed and fill BUT absolute positionCSS - 两个 div 固定并填充但绝对位置
【发布时间】：2013-03-14 08:28:30
【问题描述】：

我的问题很像这样：

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;
}

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

谢谢大家的考虑。

【问题讨论】：

您想在哪里获取内容？仅在.left 和.right 内？还是在容器内.boxdiv？
你能画出你需要的东西吗？
有什么理由不希望将.left 设置为position: absolute 吗？

标签： css

【解决方案1】：

I made some slight changes to your fiddle.

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

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

【讨论】：

【解决方案2】：

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

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

看到这个updated fiddle。

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

【讨论】：