css - 基于 Holy Grail 的布局中可调整大小的侧边栏

Question

与 this layout (显然不是我的)，我想用 javascript 调整/隐藏边栏。在编写 js 代码之前，我尝试手动更改左右列的宽度。问题是，当设置为较小的值时，中心列不会填满释放的宽度。但是主列的宽度已经设置为 100%。

所以我的问题是:

鉴于我想将左侧栏的宽度减小到 180px，我应该更改什么以使主栏也填满空白？

Answer 1

这种类型的布局使用填充来容纳侧栏。因此，如果您希望左列为 180 像素，每侧有 10 像素的内边距，则主容器的左内边距需要为 200 像素(180 像素宽度 + 10 像素内边距 * 2)。当您更改侧边栏的宽度时，您需要更新主容器上的填充以匹配。