具有動態調整的頁眉/頁腳的滾動條

Question

我正在尋找的是具有一個帶有任意數量的頁眉和頁腳的容器div ，然后在各個頁眉/頁腳之間具有另一個滾動div 。 這里的問題是頁眉和頁腳不能滾動，而容器/頁眉/頁腳可以根據其內容采取任何高度。

我只能使用靜態大小的頁眉/頁腳來進行此操作。 在代碼中，我添加了遇到的問題：頁眉/頁腳中的文本可能會換行，將其分成兩行。 因此，標題應增長以允許多余的行，並且內容應縮小以為標題留出空間。 有沒有不使用JavaScript的方法？ 如果有幫助，我會提前知道頁眉/頁腳的數量。

這將成為頁面中的組件，每頁可能有一個或多個，例如在2x2設置中，每個占據瀏覽器窗口的四分之一。 主要需要此功能，因為瀏覽器的寬度可能會更改，從而導致標題內容換行。 使用javascript可以很容易地做到這一點，但是我一直聽說resize事件處理程序是邪惡的。

例如，如果我的包裝高度為600px ，則我可能有2個頁眉和1個頁腳。 可以說第一個標頭的內容導致它換行，而第二個標頭則沒有。 因此，第一個標頭的高度為20px ，第二個標頭的高度為10px 。 並且可以說頁腳的內容也會引起換行，因此高度為20px 。 這樣就給我們提供了50px的頁眉和頁腳，因此現在滾動條的高度應為550px 。

Ascii藝術：

 ____________________________________________
|         HEADER 1                           |
|________breaks to new line__________________|
|____________________________HEADER2_________|
|                                         | ||
|                                         | ||
|    This is my scroller                  | ||
|                                         | ||
|                                         | ||
|                                         | ||
|_________________________________________|_||
|     Some                                   |
|_____Footer_________________________________|

HTML：

<div class="wrapper">
    <div class="header">
        Some<br/>
        Header
    </div>
    <div class="scroller">
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    ...
    </div>    
    <div class="footer">
        Some<br/>
        Footer
    </div>
</div>

CSS：

body{
    height:100%;
}
.wrapper{
    height:400px;
    border-left:1px solid red;
}
.header, .footer{
    background-color: #EEE;
    height:27px;
}
.scroller{
    height:calc(100% - 54px);
    background-color: #CCC;
    overflow:auto;
}

紅色邊框用於顯示包裝紙下降的距離，因此頁腳不會在下面顯示。 我這樣做不是overflow: hidden僅為調試而overflow: hidden 。

http://jsfiddle.net/yKTdz/4/

Answer 1

通過將table display與relative和absolute位置混合，可以使用純CSS （甚至不是CSS3） 實現 。

正在運行的演示： http : //jsfiddle.net/x4vhW/

的HTML

<div class="wrapper">
    <div class="tr stretch">
        <div class="td">a header</div>
    </div>
    <div class="tr">
        <div class="td">
            <div class="contentWrapper">
                <div class="content">
                    content 0
                    ...............
                    ...............
                    ...............
                    content 29
                </div>
            </div>
        </div>
    </div>
    <div class="tr stretch">
        <div class="td stretch">a footer</div>
    </div>
</div>

CSS ^{Dark Magic（TM）}

.wrapper {
    height  : 200px;
    width   : 200px;
    display : table;
}

.tr { display : table-row; }

.td { display : table-cell; }

.stretch { height : 1%; }

.contentWrapper {
    position   : relative;
    overflow-y : scroll;
    height     : 100%;
}

.content {
    position : absolute;
    right    : 0; 
    left     : 0;
}

注意：如果內容較小，則使用stretch類是為了防止頁眉和頁腳增長； 拉伸后，它們將自動適應。

最后，根據CanIUse的說法 ， 幾乎所有瀏覽器 （包括IE8） 都支持它 。

Answer 2

我采用了Matt Cooper的解決方案，並對其進行了一些更新。 這解決了無法向頁面添加多個控件的問題，也解決了頁腳尺寸設置問題。

http://jsfiddle.net/XSADu/10/

腳步：

1. 使包裝器相對，以便可以放置絕對子級
2. 將頁眉，頁腳，卷軸設為絕對。 將頁腳放在底部
3. 添加JavaScript來調整滾動條頂部/底部的大小。

的CSS

.wrapper{
    height:400px;
    border-left:1px solid red;
    position: relative;
}

.header, .footer, .scroller {
    background-color: #EEE;
    position:absolute;
    width: 100%;
}
.footer {
    bottom: 0;
}

.scroller{
    background-color: #CCC;
    overflow:auto;
}

JS

$(document).ready(function(){
    $('.scroller').css("top", $('.header').height()); 
    $('.scroller').css("bottom", $('.footer').height());     
});

注意：如果頁眉/頁腳的大小是動態的，則可能要給它們一些最大高度，以包裝的百分比表示，這樣就不會隱藏內容。

Answer 3

基於DMoses答案，此解決方案只涉及更多的jquery，但是它消除了滾動條被頁腳/頁眉稍微隱藏的問題

jQuery：

$(document).ready(function(){
    $('.scroller').css("margin-top", $('.header').height());

    var height = $('.wrapper').height() - ($('.footer').height() + $('.header').height());

    $('.scroller').css("height", height);     
});

jsfiddle.net/XSADu/5/

Answer 4

現在可以很容易地使用CSS網格完成此操作。 甚至不需要填充元素。

如果需要多個標題，只需在其中放置幾個​​div，或者如果需要的話，將“ header” div設為flexbox。

HTML保持不變：

<div class="wrapper">
    <div class="header">
        Some<br/>
        Header
    </div>
    <div class="scroller">
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    ...
    </div>    
    <div class="footer">
        Some<br/>
        Footer
    </div>
</div>

CSS：

.wrapper{
    height:400px;
    border-left:1px solid red;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: [header] auto [content]1fr [footer]auto;
}
.header{
    background-color: #EEE;
    grid-row: header;
}
.footer{
    background-color: #EEE;
    grid-row: footer;
}
.scroller{
    background-color: #CCC;
    overflow:auto;
    grid-row: content
}

http://jsfiddle.net/yKTdz/15/

Answer 5

僅靠Css是無法做到這一點的，您需要使用Javascript來檢查頁面加載時頁眉和頁腳的高度，並相應地進行調整。 否則，當您使用position：fixed時，會出現一些重疊。 參見附帶的小提琴！ http://jsfiddle.net/XSADu/

我使用jQuery來調整文檔准備好的滾動條上的填充頂部。 像這樣

$(document).ready(function(){
    $('.scroller').css("padding-top", $('.header').height()); 
});

Answer 6

正如Matt Cooper所說，我認為沒有CSS純解決方案。 這是我的嘗試： jsfiddle

var CalcHeight = function() {
    this.init = function() {
        var totHeight = $('body').height();
        var componentsHeight = $('.headers').height() + $('.footers').height();
        var diff = totHeight - componentsHeight;
        $('.hider').css({
            height: diff
        });
    }

    this.init();
}

var calcHeight = new CalcHeight;