100% 高度 div 和带有固定标题的边距实际上不是 100%

Question

我正在为跨平台移动开发 (Cordova/HTML5/angularJS/CSS3) 开发 Web 应用程序。 我试图有一个内容可滚动的标题（但使用 overflow:hidden (CSS) 在标题上没有滚动条）。

______________ | HEADER | |--------------| | |#| | |#| | Content |#| | |#| | |#| | |#| |--------------| '#' = scrollbar

所以这是可行的，但我无法一直向下滚动，因为我的一部分内容 div 不在屏幕底部。这个容器 div 是 100% 高度（CSS）和页眉高度的边缘顶部（CSS 也是）：

这里是：

CODE AND LIVE DEMO

我对 JS 进行了修复，但这对我来说不是最好的解决方案（尤其是对于移动性能），只有 CSS 应该可以工作！ 提前致谢

Answer 1

发生了什么

您希望有一个容器，该容器是整个页面减去设定高度（从其上方的页眉开始）。

您可以使用 CSS（无 JS！）并与旧浏览器完全兼容，只需使用 positioning 技巧。

首先，将您的#globalWrapper 设置为position:relative，以捕获其中包含positioned absolutely 的任何内容。

接下来，将.ScrollableWrapper 设置为position:absolute，使用top:45px（而不是margin-top:45px，以及left、right 和bottom 设置0。

代码

#globalWrapper {
    overflow: hidden;
    height: 100%;
    background-color: white;
    position:relative;
}
.ScrollableWrapper {
    top: 45px;
    left:0;
    right:0;
    bottom:0;
    border: 5px solid red;
    position:absolute;
    overflow-y: scroll;
}

注意，.ScrollableWrapper 不得设置为 height:100%。

Working Fiddle