Question

我正在尝试将不同的问题合并到一个答案中，但似乎没有一个完全符合我的要求。

给定一个具有固定高度的div“spacer”的div“容器”，另一个div“data”将占用其父级的剩余高度的最大值，而不是破坏其父级的V-scroll，也不会破坏浏览器的，而是只有自己的V-scroll。听起来很简单。

<div id="container">
    <div id="spacer">spacer</div>
    <div id="data">
        text<br/>
        text<br/>
        text<br/>
        ...
    </div>
</div>

CSS：

html, body, #container { height:100% }
#spacer { height: 50px; }
#data
{ 
  overflow-y: scroll;
  height: 100%;
}

JSFiddle example (gone wrong)

我一直在打破页面上的V-scroll（可能是因为父级得到了与页面一样高的值，但却向下移动了固定的高度。

Answer 1

如果你不介意使用它，这是一个利用绝对/相对定位的解决方案。

HTML结构保持不变（基于您的JSFiddle）。但是，我确实更改了/添加到你的CSS定义中，所以它们最终看起来像这样（margin:0只是因为身体没有渲染，周围有不必要的间距）：

html, body{
    margin:0;
    height:100%;
}
#container {
    height:100%
    position: relative;
}
#spacer {
    height: 50px;
}
#data {
    overflow-y: scroll;
    position:absolute;
    top:50px;
    bottom:0;
    left:0;
    width:100%;
}

这将允许#data垂直展开以填充#spacer #container尚未占用的所有空间。但是，它只会到#container的底部，在这种情况下是视口的底部（由于height:100%）。任何其他内容都将在#data元素内滚动。请注意，这只有在您知道#spacer元素的确切或相对高度时才有效，您似乎在这里知道。

这是一个updated JSFiddle，显示了这一点。如果这不是你想要的，请告诉我，我会很乐意进一步提供帮助。祝你好运！

Answer 2

身高：100％在这里不起作用。将此行添加到您的onload例程（标题的55个帐户）：

document.getElementById("container").style.height=document.body.clientHeight-55 +"px"

另外，设置css body {overflow：hidden}

如何使div占用所有剩余高度并显示其滚动条而不使浏览器也有一个

2 个答案: