2

我在以下问题上找不到明确的答案：

我有这个html：

<html>
<head>
    <title>Title blabla</title>
</head>

<body>
    <div id="gHeader">
    </div>
    <div id="gBody">
    </div>
</body>
</html>

gHeader 是标题部分，这是菜单所在的位置，gBody 是正文部分，这是其他所有内容的所在。

当我在 gBody 中获得大量内容时，超出了屏幕的容量，右侧会出现一个滚动条。问题是这个滚动条将 gHeader 向左推了一点。

我正在寻找的解决方案是，当滚动条出现时，它只出现在 gBody 中，而不是部分出现在 gHeader 中。

我不希望滚动条影响标题的外观。特别是因为我的菜单的一部分是从右边开始的。这可能吗？

4

2 回答 2

0

您需要手动设置内容区域的高度，并使用overflow:auto. 像这样的东西可能会起作用：

#gHeader {
    position: fixed;
    left: 0; top: 0; right: 0; height: 150px;
}
#gBody {
    position: fixed;
    left: 0; top: 150px; right: 0; bottom: 0;
    overflow: auto;
}
于 2012-11-18T20:54:46.517 回答
0

您唯一需要的是固定高度和overlow-y;自动；在你的gBody.

例子：

#gBody {
    height: 600px;
    overflow-y: auto;
}
于 2012-11-18T20:56:53.887 回答