我四处寻找，但无法解决这个问题，所以我转向这里。
I want to make a layout that looks like this:
布局由三个字段组成：
顶部的标题具有固定高度、动态宽度和垂直可滚动内容。
标题下方的正文，具有动态宽度和高度，具有可垂直滚动的内容。
右侧的侧边栏，具有固定宽度、动态高度且无滚动。 （当您滚动正文内容时，这应该保持固定）
动态高度和/或宽度意味着它将随窗口调整大小，而不是随内容调整大小。
如果有什么不清楚的地方或者有任何疑问，我会尽力回答。
编辑：我的（非常失败的）尝试之一：http://jsfiddle.net/uYTht/34/ http://jsfiddle.net/uYTht/34/
html结构：
<body>
<div id="header">
header content
</div>
<div id="content">
body content
</div>
<div id="sidebar">
sidebar content
</div>
</body>
CSS代码：
#header {
width: 100%;
height: 100px;
margin-right: 150px;
background-color: green;
overflow-y: scroll;
}
#content {
background-color: blue;
height: 100%;
overflow-y: scroll;
}
#sidebar {
position: absolute;
top: 0;
left: 100%;
margin-left: -150px;
width: 150px;
height: 100%;
float: right;
background-color: red;
overflow: hidden;
}
编辑：下面的大卫帮助我找到了方法。基本上我必须使用 calc() 函数才能使其按我想要的方式工作。
编辑编辑：下面的杰克提出了一个不使用 calc() 的解决方案，我必须说我更喜欢它。非常感谢大家的帮助！
我创建了一个简单的小提琴，不使用calc（支持不是很好 -http://caniuse.com/calc http://caniuse.com/calc，然后还有一个很大的未知数，即您可能/可能不会使用它来降低性能。）
它非常简单，使用简单的 CSS。
http://jsfiddle.net/ruYGH/3/ http://jsfiddle.net/ruYGH/3/