更新 2（这个问题似乎在演变！）：
标准 1 - 在整页或内部模式之间切换应尽可能少地更改代码：
因为在这种情况下，我们的宽度/高度body始终是宽度/高度的 100% window，如果您希望您的代码轻松适应模态等，您始终可以使用position:absolute，因为没有任何上下文，这将相对于body.
标准 2 - 布局应该支持多种方式来描述宽度和高度
这是一个 JSFiddle，几乎可以完成您提到的所有操作。它在固定元素上使用百分比和固定像素宽度。首先要注意的是，我必须做的唯一更改是在box-sizing:border-box我们的每个元素中添加一个。与 flexbox 不同，这对 IE8 有很好的支持，因此不会引起任何问题。添加它允许我们向元素添加填充，而无需更改宽度以进行补偿。
虽然左侧边栏的宽度为 20%，但它们的最小宽度也为 100 像素。为了防止与右侧的主要内容重叠，我们使用一些简单的逻辑来建立逆：
Reaches Min At = Min-width / Width * 100
在我们的示例中，我们的左侧边栏因此在 处达到最小值100/20*100 = 500px。然后@media当我们达到这个窗口大小时，我们使用一个选择器来改变我们主要内容的宽度：
@media(max-width:500px) {
#scrolling-content {
left:100px;
}
}
通过更改小提琴上的窗口大小，您会注意到当您达到最小大小时，我们的主要内容区域会改变颜色。现在我承认，这可能看起来令人困惑，但同样，通过使用诸如 Less 之类的语言，您可以轻松地将widthand设置min-widths为变量，并使用一个简单的函数来更改您的 CSS。现在我使用“几乎所有东西”这个短语的原因是因为如果你想在模态中做类似的事情，这可能会变得更加复杂，但谁知道呢，这可能是可能的！
需要注意的一点：如果您打算使用 JavaScript 来获取调整大小的事件，请务必考虑使用jQuery debounced resize 插件，因为您不想进行比您需要的计算次数多数百倍的计算！我将在此答案中留下额外的内容，因为大多数内容仍然与您的发展中的问题相关且在历史上是准确的
更新：有很多建议使用 Flexbox 的答案，但我现在真的不认为这是一个很好的解决方案。不要误会我的意思，如果 FlexBox 是一个真正可行的解决方案，我会喜欢它，但目前对它们的支持很糟糕，如果你打算为大多数网络填充它，你可能会使用任何其他 JavaScript 解决方案，我认为 JavaScript 不是用于整个页面呈现的正确工具。
我仍然不明白为什么使用简单的 CSS 很难实现您的目标position。您不需要使用任何 JavaScript 和。我认为这是非常易于管理的。如果您真的在维护您的样式表方面遇到困难，那么为什么不使用Sass/SCSS或Less之类的东西，因为您可以创建变量、mixin、函数等，并显着减少您需要进行的更改数量。
也就是说，他是您解决方案的一个非常快速的模型，仅使用纯 CSS 和 HTML 工作。我使用的是 4 个固定divs，并且可以进行简单的修改，以便“滚动内容”不固定，而只是使用边距来正确定位。这将有额外的好处，不必在 div 内滚动，但能够对身体进行滚动。
所有必需的CSS：
div { position:fixed; }
#top {
top:0;
left:0;
right:0;
height:40px;
}
#menu {
top:40px;
height:40px;
left:0;
width:200px;
}
#long-list {
top:80px;
left:0;
width:200px;
bottom:0;
overflow-y:auto;
}
#scrolling-content {
top:40px;
bottom:0;
right:0;
left:200px;
overflow-y:auto;
}
很容易注意到40px和200px作为菜单的高度和宽度的重复。考虑到这一点，您可以简单地使用动态语言的变量并只定义一次（较少示例）：
@leftwidth: 200px;
#scrolling-content {
left:@leftwidth;
}
#menu, #longlist {
width:@leftwidth;
}
争议#1：框架不灵活或不易编辑
您提到很难轻松操作 CSS 框架，因为依赖于静态内容，他们必须决定要使用的列数（在 Bootstrap 和许多其他情况下，他们选择 12，因为它很容易被 1、2、3 整除， 4,6)。但是，在 Bootstrap 2 中，自定义列数非常容易。预计当 Bootstrap 3 RC2 出现时，此功能也会存在。还有许多资源可让您将Less 与 Bootstrap一起使用。也就是说，创建一个 Less 风格的灵活流体网格系统是相当常规的，请参阅演示（免责声明：我没有使用 Less 的经验，这篇文章帮助我进行循环）：
/* The total number of columns you wish to use */
@columns: 15;
/*
We loop through and for each create class
.dynamic-<index>-<columns>
*/
.looping (@index) when (@index > 0) {
(~".dynamic-@{index}-@{columns}") {
width: percentage(@index/@columns);
}
.looping(@index - 1);
}
/* Stop and do nothing at 0 */
.looping (0) {}
/* Call our function */
.looping (@columns);
然后你的 HTML 标记就变成了：
<div class="cf rows">
<div class="dynamic-4-15">4/15th width</div>
<div class="dynamic-7-15">7/15th width</div>
</div>
争议 #2：基于百分比的模态很难使用 CSS
在您提到的评论中，您“希望布局相对于对话框宽度，而不是浏览器窗口宽度”。那么这当然也是可能的。事实上，这真的很简单，几乎不需要更改我们的代码：
#some-modal {
position:fixed;
top:10%;
bottom:10%;
left:10%;
right:10%;
}
/* Before this was simply div, and it was fixed, now it's absolute */
#some-modal div {
position:absolute;
padding:10px;
}
