Question

我想拥有一个带有固定标题和可滚动内容的容器。这是我为此设置的HTML和CSS

HTML：

<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

这是一种有点愚蠢的解决方案，但只有我能想到的一个：

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

使用transform hack创建new stacking context意义标题将固定为.container而不是文档。
使用left和right设置标题宽度减去滚动条宽度（或者您可以执行此操作：width: calc(100% - 17px)）。

我在这里使用幻数，因为most modern browsers上的滚动条宽度为17px。您可以使用JS计算此值并设置内联（Bootstrap在modal中执行此操作）。

编辑：如评论中所述，不需要翻译hack，因为将位置更改为绝对（并将容器设置为position: relative）也可以。这是JS用于恢复滚动条宽度：

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

Answer 2

这是一个技巧，在标题中使用了一个包装器。

我强制滚动标题，根据内容制作包装大小，然后我只需用50px增加标题，以确保所有不同的浏览器＆＃39;滚动条大小被覆盖并在包装器上使用相同的量将其推回视图。

这样做，您不必担心单个滚动条宽度调整（或使用脚本）。

我还将标题更改为绝对位置，以便它与容器一起定位，但如果需要，您当然可以切换回固定位置。

更新

Firefox无法显示小高度的滚动条，因此如下所示添加margin/padding-top可使其正常工作

＆＃13;

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

＆＃13;

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

＆＃13;

具有固定标头的可滚动内容

2 个答案: