Question

我的HTML如下：

<div id="list-container"> </div>
<div id="button-container"> </div>

这两个div的CSS：

#button-container {
    float: right;
    width: 100px;
    height: 100%;
    background-color: #f5f5f5;
}

#list-container {
    float: left;
    height: 100%;
    background-color: #FAD275;
}

这两个div都是并排的并且具有相同的高度。 button-container div位于右侧，且必须具有100px的固定宽度。但是，名为list-container的左div需要具有等于父容器分配的剩余空间的宽度。例如，如果我的父div的宽度为400px，并且button-container div占用100px，那么我应该可以指定height: 100%之类的内容对于list-container div而言，其宽度等于300px。

绝对＃1规则是我无法为list-container div设置固定宽度。这整个事物的父div是动态可调整大小的，因此它下面的每个孩子都必须设计为使用它来调整大小，因此存在这个问题的原因。

请注意，这一切都是在Google Chrome扩展程序中完成的，因此我可以访问HTML5和CSS3。我也不需要担心跨浏览器支持。我只想在Chrome中使用它。

任何人都可以帮我弄清楚如何在不使用固定宽度的情况下使list-container填充父容器的剩余空间吗？

Answer 1

您可以使用CSS属性display: table;和display: table-cell;。

这模仿表处理行的方式，但将其应用于div。

你需要一个包装器div，但这是你需要的所有额外标记。

HTML

<div class="wrap">
<div id="list-container">list container </div>
<div id="button-container">button container </div>
</div>

CSS：

.wrap
{
    display: table;
    width: 100%;
    height: 100%;
}

#button-container {
    display: table-cell;
    width: 100px;
    height: 100%;
    background-color: #f5f5f5;
}

#list-container {
    display: table-cell;
    height: 100%;
    background-color: #FAD275;
}

请参阅我的示例here。

Answer 2

将左侧容器设置为100％并为其提供100px的右边距。我原来的答案也说填充，但那是错的。保证金为浮动权利div创造了空间。百分比widh允许左div动态调整大小。

Answer 3

此网站可能对您有所帮助：

http://glish.com/css/

动态尺寸的并排浮子

3 个答案: