可變寬度頁眉滾動頁面高度

Question

我有一個ul這是頁面的高度。我希望它能夠在該ul內滾動。這可以看這裏：http://d.saew.it/pRyz

正如你所看到的，它可以作爲頁面的高度滾動。現在，我也希望它有一個標題，正如你可以在那裏看到的那樣。它應該是「固定」在頂部，但列表的寬度是可變的，因此我不能將其設置爲固定的，因爲它不能在變量寬度的父級中居中。現在

，我有什麼近乎完美的作品，除了一個事實，即ul的height: 100%是父（與窗口）的高度，而div頭仍然佔用空間上面。因此，這將拋出父元素末尾的幾個像素。檢查出來：http://d.saew.it/NXL1

有沒有完成我想要的純CSS的方法嗎？

編輯：

的代碼是手寫筆，但任何人都應該仍然能夠閱讀：

div.ul-header 
    background-color #E6E6E6 
    text-align center 
    margin 0 
ul 
    background-color #E6E6E6 
    height 100% 
    margin 0 
    overflow-x hidden 

這些元素的所有的父母對他們height: 100%;允許其到達窗口高度。

Answer 1

我不完全清楚你想要什麼，但this是我最好的猜測。

基本上你在做什麼是使用絕對定位和溢出規則來控制什麼樣的卷軸，以及它出現在哪裏。

容器裝有兩個頭和滾動列表，並具有網頁體內height: 100%。它也有position: relative，以便它的子元素可以絕對定位。

子元素 - 標題和名單 - 都有position: absolute。這樣可以強制列表的高度既受限制（因此它的內容溢出）和變量（根據其父項的高度），也就是說，它應該總是恰好與其父項的高度相比減去標題。請注意，其top屬性的值需要對應於合計標題的高度 - 包括填充和邊框。

然後讓你的滾動列表，你可以在列表中使用overflow: auto。

要獲得頭你的文本居中是text-align: center，將工作無論容器的寬度一樣簡單。