更新 2（这个问题似乎在演变！）：

标准 1 - 在整页或内部模式之间切换应尽可能少地更改代码：

因为在这种情况下，body 的宽度/高度始终是 window 宽度/高度的 100%，如果您希望您的代码轻松适应模态等，您始终可以使用 position:absolute ，因为没有任何上下文，这将与body 相关。

标准 2 - 布局应支持多种描述宽度和高度的方式

Here's a JSFiddle that can do almost everything you mention。它在固定元素上使用百分比和固定像素宽度。首先要注意的是，我必须做的唯一更改是在我们的每个元素中添加一个box-sizing:border-box。与 flexbox 不同，this has good support 回到 IE8，因此不会引起任何问题。添加它允许我们为元素添加填充，而无需更改宽度来进行补偿。

虽然左侧边栏的宽度为 20%，但它们的最小宽度也为 100 像素。为了防止与右边的主要内容重叠，我们使用一些简单的逻辑来建立逆：

在我们的示例中，我们的左侧边栏因此在100/20*100 = 500px 处达到一个最小值。然后当我们达到这个窗口大小时，我们使用@media 选择器来改变我们主要内容的宽度：

通过更改小提琴上的窗口大小，您会注意到当您达到最小大小时，我们的主要内容区域会改变颜色。现在我承认，这可能看起来令人困惑，但同样，通过使用诸如 Less 之类的语言，您可以轻松地将 width 和 min-widths 设置为变量，并使用一个简单的函数来更改您的 CSS。现在我使用“几乎所有东西”这个短语的原因是，如果你想在模态中做类似的事情，这可能会变得更加复杂，但谁知道呢，这可能是可能的！

需要注意的一点：如果您打算使用 JavaScript 来获取调整大小事件，请务必考虑使用 jQuery debounced resize plugin，因为您不想进行比您需要的数百倍的计算！ 我将在这个答案中留下额外的内容，因为大多数内容仍然与您的发展中的问题相关并且在历史上是准确的

更新：有很多答案建议使用 Flexbox，但我真的不认为这是一个很好的解决方案。不要误会我的意思，如果 FlexBox 是一个真正可行的解决方案，我会喜欢它，但现在 Support for them is terrible，如果你要 polyfill那么对于大多数网络来说，你还不如使用任何其他 JavaScript 解决方案，我认为 JavaScript 不是用于整个页面呈现的正确工具。

我仍然不明白为什么使用简单的 CSS positions 很难实现您的目标。您不需要使用任何 JavaScript 和。我认为它是非常易于管理的。如果你真的在维护你的样式表时遇到了困难，那么为什么不使用像 Sass/SCSS 或 Less 这样的东西，因为你可以创建变量、mixin、函数等.，并显着减少您需要进行的更改次数。

也就是说，he's a really quick mockup of your solution，只使用纯 CSS 和 HTML。我使用的是 4 个固定的divs，并且可以进行简单的修改，以便“滚动内容”不固定，而只是使用边距来正确定位。那将有额外的好处，不必在 div 内滚动，但可以对着 body 滚动。

所有必需的 CSS：

很容易注意到40px 和200px 的重复作为菜单的高度和宽度。考虑到这一点，您可以简单地使用动态语言的变量并只定义一次（较少示例）：

您提到很难轻松操作 CSS 框架，因为依赖于静态内容，他们必须决定要使用的列数（在 Bootstrap 和许多其他情况下，他们选择 12，因为它很容易被 1,2 整除,3,4,6)。 然而，在 Bootstrap 2 中，customise the number of columns 非常容易。预计当 Bootstrap 3 RC2 出现时，此功能也会存在。还有许多资源允许您使用Less with Bootstrap。也就是说，创建一个 Less 风格的灵活流体网格系统，see demo 将是相当常规的（免责声明：我没有使用 Less 的经验，this article helped me with looping）：

然后你的 HTML 标记就变成了：

在您提到的 cmets 中，您“希望布局相对于对话框宽度，而不是浏览器窗口宽度”。那么这当然也是可能的。其实很简单，and requires almost no change to our code：