100％高度div和带固定头的边距实际上不是100％

Question

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

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

所以这是有效的，但我不能一直向下滚动，因为我的内容div的一部分不在底部的屏幕之外。此容器div是100％高度（CSS）和页眉高度的上边距（CSS也是）：

这是：

CODE AND LIVE DEMO

我对JS做了一个修复，但它不是我的最佳解决方案（特别是对于移动性能），CSS只能工作！ 提前致谢

Answer 1

正在进行什么

你想要一个容器，它是所有页面减去一个设定的高度，（从它上面的标题）。

你可以使用CSS（没有JS！）和完全旧的浏览器兼容性，只需使用position技巧。

首先，将#globalWrapper设置为position:relative，以便在其中捕获position absolute个.ScrollableWrapper内的任何内容。

接下来，将position:absolute设置为top:45px，margin-top:45px（而不是left，right，bottom和{{ 1}}到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