Question

现在我正在创建一个包含固定高度和滚动条的div的页面。不幸的是，这个div也有固定的标题。问题是：固定标题重叠滚动条，因此无法使用固定标题右侧的滚动条单击。这种问题的可能解决方法是：

1）一定宽度的自定义滚动条

2）简单的调整大小处理程序，它更新固定的标题宽度，使其等于.content块宽度。

但是这个解决方法需要js。

我可以用纯CSS解决问题吗？

为了使事情更清楚，我在沙箱中举了一个例子来说明这个问题。

谢谢！

CODEPEN： https://codepen.io/anon/pen/GGRVRP

这是我的代码：

HTML：

<div class="container">
  <div class="header">Fixed header, long enough to demonstrate that scrollbar can't be triggered by clicking on header</div>
  <div class="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, eum sapiente non, natus et, ullam unde odio quos quo blanditiis aspernatur minus quas? Architecto enim iure itaque reiciendis cupiditate, et consequatur natus praesentium aspernatur voluptas illum odit eius distinctio doloribus animi iusto, repudiandae, maiores sint laudantium id unde veritatis! Suscipit odio obcaecati possimus nisi culpa autem deleniti dolores inventore commodi ex sed consectetur modi cupiditate eveniet, omnis repellendus placeat ab iste fuga harum esse quod enim excepturi minus? Similique, alias est doloremque deserunt tempora dolore delectus, eligendi veritatis ipsum, dolorum tenetur id quod cum rerum vero amet tempore laborum nam.</div>
</div>

CSS：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 500px;
  padding-top: 100px;
  overflow: auto;
  background-color: coral;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100px;
  padding: 10px 0;
  background-color: violet;
  text-align: center;
  font-weight: bold;
}

Answer 1

使用位置：粘性可能会帮助你

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  position: relative;
  z-index: 1;
  width: 240px;
  height: 500px;
  padding-top: 0px;
  overflow: auto;
  background-color: coral;
}

.header {
  position: sticky;
  left: 0;
  top: 0;
  width: 224px;
  height: 100px;
  padding: 10px 0;
  background-color: violet;
  text-align: center;
  font-weight: bold;
}

<div class="container">
  <div class="header">Fixed header, long enough to demonstrate that scrollbar can't be triggered by clicking on header</div>
  <div class="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, eum sapiente non, natus et, ullam unde odio quos quo blanditiis aspernatur minus quas? Architecto enim iure itaque reiciendis cupiditate, et consequatur natus praesentium aspernatur voluptas illum odit eius distinctio doloribus animi iusto, repudiandae, maiores sint laudantium id unde veritatis! Suscipit odio obcaecati possimus nisi culpa autem deleniti dolores inventore commodi ex sed consectetur modi cupiditate eveniet, omnis repellendus placeat ab iste fuga harum esse quod enim excepturi minus? Similique, alias est doloremque deserunt tempora dolore delectus, eligendi veritatis ipsum, dolorum tenetur id quod cum rerum vero amet tempore laborum nam.</div>
</div>

Answer 2

您需要通过添加边距而不是填充来补偿标头。你没有问题。

.container {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 400px;
  margin-top: 100px;
  overflow: auto;
  background-color: coral;
}

https://codepen.io/draganradu/pen/BVyBpW

带有固定标题

2 个答案: