如何让网页占100%且能适应滚动条？

问题描述

我有一个界面如下：在右侧栏里，内容是width:100%，效果很好，折叠按钮贴着显示器右侧边缘但是一旦内容多了，出现垂直滚动条，那么，就出现了水平滚动条，折叠按钮也有一大半被垂直滚动条挡住当然原因是因为我的宽度是100%我想了几个解决办法1、宽度缩小，空出垂直滚动条的距离，但是导致折叠按钮离屏幕边缘有一定距离，难看，此方法不行。2、宽度缩小，空出垂直滚动条的距离，然后设置垂直滚动条始终显示，此方法就是我用的，也是截图中所示，效果尚可。3、宽度能够随着出现垂直滚动条而缩小至折叠按钮贴着垂直滚动条，这种效果最完美，可惜不会。所以想请教下，如果不用JS，通过CSS设置，能够达到效果3的？

解决方案

解决方案二：
比如说DIV嵌套之后，当一个DIV实际高度大于其parent高度，你就知道外层DIV应该已经有滚动条了。所以有没有显示滚动条是可以动态推断出来的。另外，嵌套DIV之后，你在内层的控件只看内层DIV的宽度而动态调整，而不应该看外层包含滚动条的DIV的宽度而动态调整。如果吧层次看错了，也会错误地计算宽度。