Question

我有一种情况，我想要滚动主内容div而不是标题。我的标题有一个固定的高度，内容div用于拉伸垂直空间的其余部分，如果内容超出页面底部，则使用滚动条。通常我会在内容div（top:height-of-header, bottom:0, left:0, right:0）上使用绝对定位，并将overflow-x设置为auto。然而，事实是我在标题和内容之间有一个额外的div，它具有基于其内容的灵活高度，并且有时只出现（我有一个按钮可以切换该div的可见性）。因此，我不能对内容div使用绝对定位，因为最大距离会有所不同。我也不能使用百分比高度，因为我希望非滚动部分的内容恰到好处，而不是基于页面的百分比。

以下是设置的简化版本：

<div id="header"></div>     <--- Fixed height
<div id="adddiv"></div>     <--- Not always visible. Flexible height.
<div id="content"></div>    <--- The only one I want scrolling

编辑：添加了一个jsfiddle，其中包含一个更大的示例： https://jsfiddle.net/r7b30v2f/4/ （没有滚动条以我想要的方式工作）

由于我已经使用javascript来处理“中间”div的切换，我总是可以使用javascript来更改内容div的顶部值，具体取决于中间div是否正在显示。但如果有的话我会更喜欢css解决方案。

Answer 1

如果设置了内容div height或max-height，它只会将滚动条放在内容div中。 CSS示例：

#contents {
    max-height: 250px;
    width: 100%;
    overflow-y: auto;
}

编辑：你可以尝试通过计算标题的高度+ adddiv的高度来设置高度。

var headerHeight = document.getElementById("header").offsetHeight;
var adddivHeight = document.getElementById("adddiv").offsetHeight;
var heightUsed = headerHeight + adddivHeight;
var totalHeight = screen.height;
var height = totalHeight - heightUsed;

（我确实试过这样的东西，但是我无法让它起作用，我只是想我会分享我认为可以解决的问题。）

滚动div高度不确定

1 个答案: