Question

我无法找到以下明确答案：

我有这个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上。

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

Answer 1

您需要手动设置内容区域的高度，并使用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;
}

Answer 2

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

示例：

#gBody {
    height: 600px;
    overflow-y: auto;
}

使滚动条出现在div中

2 个答案: