帶動態大小頁眉/頁腳的滾輪

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; 
} 

的紅色邊框是展示包裝多遠下降，所以頁腳沒有按」 t顯示在下面。我只是爲了調試而不是overflow: hidden。

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

Answer 1

這現在可以很容易地使用CSS網格來完成。甚至不需要填充物。

如果您想要多個標題，只需在其中放置幾個​​div，或者將「標題」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 2

有沒有辦法，只用CSS來做到這一點，你需要使用Javascript功能來檢查頁眉和頁腳在頁面加載時的高度，並相應地調整的事情。否則，當你使用position：fixed時，你會得到一些重疊。看附件小提琴！ http://jsfiddle.net/XSADu/

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

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

Answer 3

正如馬特庫珀所說，我不認爲有一個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; 

Answer 4

我拿了馬特庫珀的解決方案，並更新了一下。這解決了無法將多個小部件添加到頁面以及頁腳大小問題。

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 5

大廈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 6

實現了與純CSS （甚至沒有CSS3），通過與relative和混合定位。

運行演示：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^{黑魔法（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類用於防止頁眉和頁腳在內容較小的情況下增長;與舒展，他們將自動適合。

最後，根據可以使用,it is supported by almost all browsers，包括IE8。