1

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

给定一个具有固定高度的 div“spacer”的 div“容器”，另一个 div“数据”将占用其父级剩余高度的最大值，不会破坏其父级的 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 示例（出错了）

我不断打破页面上的 V-scroll（可能是因为父级与页面一样高，但被固定高度向下移动。

4

2 回答 2

3

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

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，您似乎在这里知道。

这是一个更新的 JSFiddle，显示了它所取得的成果。如果这不是您想要的，请告诉我，我很乐意为您提供进一步的帮助。祝你好运！

于 2013-08-09T04:34:14.857 回答
0

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

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

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

于 2013-08-08T23:06:30.730 回答