固定标题的可滚动内容

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