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

【问题标题】：How to change width to fill the remaining space (CSS)如何更改宽度以填充剩余空间（CSS）
【发布时间】：2011-04-08 07:15:36
【问题描述】：

看看：

结果应该是

【问题讨论】：

+1 以获得可爱的截图。但请添加 CSS 代码
这些截图是手动制作的吗？

标签： css width

【解决方案1】：

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

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

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

【讨论】：

非常巧妙地利用边距，尽管感觉并不完全自然。

【解决方案2】：

其实使用css flex display可以轻松解决这个问题。

设置父容器有

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

【讨论】：