如何更改宽度以填充剩余空间（CSS）

Question

看看：

结果应为

Answer 1

#sidebar { float:left; width:280px; }
#content { margin: 0 0 0 280px; } /* dont float it */

http://jsfiddle.net/auTbG/1/

如果你在#content中有浮动并且你试图清除它们，你会遇到问题。

Answer 2

实际上使用css flex显示可以轻松解决这个问题。

将父容器设置为

display: flex;
align-items: stretch;
align-content: stretch;

然后孩子们将flex-grow: 0;

让最后一个孩子拥有flex-grow: 1;

将#sidebar和#post_box放入#content，然后

#content { display:flex; align-items: stretch; align-content: stretch; }
#sidebar { float:left; width:280px; flex-grow: 0; }
#post_box { float: left; flex-grow: 1; }