我在尋找的是一個容器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
。
所以,我說的對。包裝必須是'400px'高,頁眉和頁腳可以在包裝內部儘可能大,所以如果頁眉和頁腳都是'150px'高。內容必須是'100px'我不明白你說什麼時會說有多個頁眉/頁腳 – iConnor
包裝可以是任意大小,即使是一個百分比如50%。通過多個頁眉/頁腳我的意思是會有兩個不同的div代表兩個不同的標題,這兩個標題都不應該滾動並應該影響滾動條的高度。你的尺寸是正確的,但150px不會被設置,它只能通過內容擴展來實現。 (我會嘗試澄清更多的問題) – Don
這只是一個固定的頁眉/頁腳,流體內容的主題,這已被問了很多次的變種SO(http://stackoverflow.com/questions/10474354/layout-與固定的集管和尺固定寬度側欄和 - 柔性的內容)。你可能無法做到固定的,流體高度的標題,在IE <10沒有JS的情況下工作。有jQuery? – isherwood