Question

我的问题很像这个：

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

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

没有使用javascript，有没有办法让两个包含的div，一个浮动在一个锁定的宽度，另一个在设置的高度粘在容器的底部，并采取其余的可用宽度？这里的难点是上面和周围的两个div必须保持可点击并与父div相关联。

以下是代码：

.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上设置正确的位置 plus div之间你想要的任何间隙（以及你在左边创建的任何间隙）。 / p>

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

Answer 2

您是否尝试使用display: table，display: table-cell和display: table-row？如果您为容器显示表格的显示值，然后为每个left和right提供值table-cell，则可以将容器拆分为两列。

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

请参阅此updated fiddle。

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

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

2 个答案: