html - DIV 填充可用空间

Question

我正在尝试在我的网页上创建一个响应式部分。我将使用媒体查询调整内容大小并关闭内容 block ，但我还需要添加以下行为。

在页面上，我有 3 列，如下所示:

黄色和绿色 block 与固定宽度的部分相关 - 将它们视为侧边栏。

红色 block 需要是流动的并填充父包装器内的可用空间。一个或多个固定宽度的 block 可能被隐藏，因此不可能在流体 block 上使用右边距或填充，因为它可能相关也可能不相关。因此，我努力想出一个解决方案。

这是可能位于页面上的 HTML 示例。

<div class="wrap">
    <div class="fluid">
        <p>This should expand to fill the space available</p>
    </div>
    <div class="fixed">
        <p>Fixed width, but can be hidden</p>
    </div>
    <div class="fixed">
        <p>Fixed width, but can be hidden</p>
    </div>
</div>

有什么想法可以实现吗？

Answer 1

试试这个

<div class="wrap">
    <div class="fixed">
        <p>Fixed width, but can be hidden</p>
    </div>
    <div class="fixed">
        <p>Fixed width, but can be hidden</p>
    </div>
    <div class="fluid">
        <p>This should expand to fill the space available</p>
    </div>
</div>

CSS

.fixed{
    float: right;
    height: 200px;
    width: 200px;
    background: #000;
    color: #fff;
}
.fixed:first-child{background:red;}
.fluid{
    overflow: hidden;
    height: 200px;
    background: red;
}

链接到 Fiddle