固定標題的可滾動內容

Question

我想擁有一個固定標題和可滾動內容的容器。這裏是我已建立了這個

HTML代碼的HTML和CSS：

<div class="container"> 
    <div class="header">Header</div> 
    <div class="content"> 
    <ul> 
     <li>Content</li> 
     <li>Content</li> 
     ... 
    </ul> 
    </div> 
<div> 

CSS：

.container { 
    margin-top: 200px; 
} 

.header { 
    position: fixed; 
    width: 100%; 
    height: 20px; 
    background-color: blue; 
    color: white; 
} 

.content { 
    padding-top: 20px; 
    height: 250px; 
    background-color: grey; 
    overflow: auto; 
} 

鏈接codepen：http://codepen.io/robkom/pen/XKMQGM

正如你所看到的，頭是固定的並與滾動條重疊（當可見時）。我想要的是滾動條將標題向左推（與內容一樣），並且在滾動時仍然保留在容器的頂部。

固定元素從常規文檔流中移除並相對於視口進行定位，因此我不確定使用position: fixed的解決方案是否可行，但有什麼方法可以實現此結果嗎？

Answer 1

這裏是一個特技中，使用報頭的包裝。

我強制在標題上滾動，根據內容製作包裝大小，然後我簡單地增加了50px的標題，以確保所有不同瀏覽器的滾動條大小都被覆蓋並在包裝上使用相同的數量來推送它回到視圖中。

這樣做，您不必擔心單個滾動條寬度調整（或使用腳本）。

我還將標題更改爲絕對位置，以便它與容器一起定位，但如果需要的話，您當然可以切換回固定位置。

更新

Firefox不顯示小高峯滾動條，因此增加margin/padding-top如下圖所示使得它的工作

html, body { 
 
    margin: 0; 
 
} 
 
.container { 
 
    position: relative; 
 
    overflow-x: hidden; 
 
    margin-top: 0px; 
 
} 
 
.header { 
 
    position: absolute; 
 
    overflow-y: scroll; 
 
    width: calc(100% + 50px); 
 
    height: 20px; 
 
    margin-top: -20px; /* Firefox doesn't show scrollbar for small */ 
 
    padding-top: 20px; /* heights, so these two lines make it work */ 
 
} 
 
.header .wrapper { 
 
    width: calc(100% - 50px); 
 
    height: 100%; 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
.content { 
 
    padding-top: 20px; 
 
    height: 200px; 
 
    background-color: grey; 
 
    overflow: auto; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    <div class="wrapper"> 
 
     Header  
 
    </div> 
 
    </div> 
 
    <div class="content"> 
 
    <ul> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
    </ul> 
 
    </div> 
 
<div>

Answer 2

這是有點哈克的解決辦法，但我唯一能想到的：

.container { 
    margin-top: 200px; 
    transform: translate3d(0,0,0); /*1*/ 
} 

.header { 
    position: fixed; 
    left: 0; right: 17px; /*2*/ 
    height: 20px; 
    background-color: blue; 
    color: white; 
} 

1. 使用變換黑客創建new stacking context意頭將被固定爲.container，而不是文件。

2. 使用left和right設置標題寬度減去滾動條寬度（或者您可以這樣做：width: calc(100% - 17px)）。

   我在這裏使用了幻數，因爲滾動條寬度是17px，在most modern browsers。你可以計算這個值並使用JS內聯設置（Bootstrap在modal中這樣做）。

編輯：正如在評論中指出，翻譯是不是需要破解的改變位置，絕對（和設置容器position: relative）也適用。下面是對JS滾動retriving寬度：

function getScrollbarWidth() { 
    var scrollDiv = document.createElement('div'); 
    scrollDiv.style.overflowY = 'scroll'; 
    document.body.appendChild(scrollDiv); 
    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; 
    document.body.removeChild(scrollDiv); 
    return scrollbarWidth; 
}; 

function setElementWidth(elem) { 
    var offset = getScrollbarWidth(); 
    elem.style.right = offset + 'px'; 
} 

var header = document.querySelector('.header'); 
setElementWidth(header); 

DEMO