Question

我一直在四处寻找，但我无法解决这个问题，所以我要转到这里。

我想制作一个如下所示的布局： enter image description here

布局包含三个字段：

顶部的标题，具有固定的高度，动态宽度和可垂直滚动的内容。
标题下方的正文，动态宽度和高度，内容可垂直滚动。
右侧的侧边栏，具有固定的宽度，动态高度，无滚动。（滚动正文内容时，这应该保持不变）

动态高度和/或宽度意味着它会随窗口调整大小，而不是随内容调整大小。

如果有任何不清楚或有任何问题，我会尽力回答。

编辑：我的一次（非常失败的）尝试：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（）的解决方案，我必须说我更喜欢。非常感谢大家的帮助！

Answer 1

我创建了一个简单的小提琴，它不使用calc（支持不是很好 - http://caniuse.com/calc，然后就是你可能/可能不会使用它的任何性能惩罚的大未知数..）

使用简单的CSS非常直接。

http://jsfiddle.net/ruYGH/3/

Answer 2

您可以使用overflow属性的每个元素使用定义的高度和宽度来执行此操作。

使框可滚动（如果内容不适合内部）：

overflow:auto;

使框不可滚动：

overflow:hidden;

请注意，如果未定义高度和宽度，则元素将增长以适合所有内容。

我在这里做了一个（不是很漂亮，但很实用）的例子：

JSFiddle

编辑：

您可以将侧边栏设为固定宽度，并使用calc相应调整其他元素：

.sidebar{
    width: 200px;
}

.left{
    width: calc(100% - 200px);
}

JSFiddle已更新，以反映这一点。

Answer 3

使用“溢出”设置div的样式，将滚动条放在您想要的位置，并防止它们出现在您不想要的位置。如果内容太大而无法放入固定宽度区域，您还可以使用溢出来指定您希望在内容中发生的内容。

Chris Coyer is always a knowledgeable CSS resource

就布局而言，如果你在第一行的第二列和第二行中只有一列使用rowspan =“2”的两列表，它就是在公园散步。

如果你不想使用表格（没有充分的理由不这样做，但有成千上万的人会瞧不起你），那么请看看使用带有style =“display：table的div。 ......“

再次Chris Coyer has an explanation

感谢小提琴，你的溢出css工作只是你的标题和内容div是100％宽（全屏），滚动条在概念上位于侧边栏下。我需要使用该表格布局销售给您，以便您可以“动态”修复您的维度，以便浏览器可以知道何时滚动而不是无限期地缩小内容以适应内容的大小而不是溢出滚动条

带有可滚动内容的标题和正文的CSS和DIV，以及右侧固定的侧边栏

3 个答案:

JSFiddle

编辑：