100％高度div和帶固定頭的邊距實際上不是100％

Question

我正在開發一個用於跨平板移動開發的Web應用程序（Cordova / HTML5 / angularJS / CSS3）。 我試圖有一個內容可滾動的標題（但在標題上沒有使用overflow：hidden（CSS）的滾動條）。

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

所以這是有效的，但我不能一直向下滾動，因為我的內容div的一部分是在底部的屏幕之外。 此容器div是100％高度（CSS）和頁眉高度的上邊距（CSS也是）：

這里是：

代碼和現場演示

我用JS修復了它，但它不是我最好的解決方案（特別是對於移動性能），CSS只能工作！ 提前致謝

Answer 1

這是怎么回事

你想要一個容器，它是所有頁面減去一個設定的高度（從它上面的標題）。

你可以使用CSS（沒有JS！）和完全舊的瀏覽器兼容性，只需使用position技巧。

首先，將#globalWrapper設置為position:relative ，以捕獲position absolute position 。

接下來，將.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% 。

工作小提琴