Javascript CSS中的侧面板

我有一个名为calendar的div，它位于名为cal container的div中。日历的宽度为：100%，因此当前它占用了整个cal容器

我需要添加一个侧面板div。此div的固定宽度为

150像素

。因此，#日历宽度应为#cal容器宽度-150px。这在CSS中是可能的，还是我被迫使用表格

如果可能的话，有没有一个例子？我用谷歌搜索了一下，但没有找到我想要的。 侧面板可以通过单击按钮隐藏和显示，因此添加填充将不起作用

以下是我的意思： 天数部分是日历，非计划部分是150px的侧面板

我试着将日历向左浮动，并将侧面板向右闭合，使其宽度为150px。但我的想法是，如果我隐藏该div，则日历应占100%

谢谢

---

像这样，蓝色的一面是日历，左边是日历，但日历需要占据房间的一面，隐藏时不会。

浮动结果：

---

所有主要浏览器和IE10支持。不支持

使其工作的代码基本上取决于以下结构：

<div class="sideBar">
  ...
</div>
<div class="tableWrapper">
  <table>
    ...
  </table>
</div>

这里发生的事情是，

.sideBar

向右浮动，并占用它需要的任何空间。同时，

.tableWrapper

将占用

溢出：隐藏的
留下的任何空间。最后，告诉
表
占据其可用宽度的100%

单击演示中的按钮，可以看到表格自动调整大小。
Any？像这样，蓝色将是侧面，日历将是左侧，但隐藏时日历需要占据房间一侧。日历基本上是表格数据，因此在我看来，使用表作为日历结构并不是一件可怕的事情。日历是一个表，只需将其视为需要2个div，A的宽度是parent-B宽度。B宽度是可变的。如果您勾勒出日历和侧面板的轮廓，并将此容器设置为特定宽度（例如1000px）和相对位置，则您知道侧面板为1000px的15%，因此剩余宽度（日历）将自动填充剩余宽度
.sideBar {
  float: right;
}

.tableWrapper {
  overflow: hidden;
}

table {
  width: 100%;
}