Question

我正在开发一个小小的CSS / HTML项目，而且我遇到了一堵墙。希望我能在这里得到一些帮助。以下是我正在处理的用户界面的链接：http://imgur.com/a/yKXk9

我要做的是将Projects标头粘贴到该容器div的顶部，并让所有项目在其下方滚动而不与标题重叠。

这是我对容器的CSS：

.projectContainer {
  background-color: rgba(0, 0, 0, 0.15);
  width: 30%;
  height: 50%;
  border-radius: 2em !important;
  margin: 1em;
  overflow-y: auto;
  position: relative;
}

这是我用于标题的CSS。

.projectHeader {
  position: absolute;
  padding-left: 35%;
  top: 0;
  height: 1.5em;
}

编辑：我还添加了一些我正在使用的HTML：

<div class = "projectContainer">
  <div class="name projectHeader">Projects</div>
  <div class="projectThumbnail">
    <a href="http://lunchline.herokuapp.com" target="_blank">
      <i class="fa fa-cutlery fa-3x"></i>
        <p>LunchLine</p>
    </a>
  </div>
  MORE PROJECT THUMBNAILS HERE
</div>

这显然不起作用，因为标题滚动就像其他一切一样。我尝试在标题上使用position：sticky，问题是所有内容都滚动了标题文本BENEATH而不是整齐地结束在标题div的底部。如果有人能指导我朝着正确的方向前进，我将非常感激。

另外，作为旁注：是否有办法摆脱那个糟糕的滚动条并且只是出现拇指（并且只在我实际滚动时出现）？

谢谢大家。

编辑：这是一个JS小提琴。 https://jsfiddle.net/ksy6ahL0/

我尝试将其剥离到容器和东西，所以它看起来很乱，但我认为它基本上显示了我正在尝试做的事情。

Answer 1

我认为你最大的问题是你把溢出放在主div上，而不是放在内容div上。

.container{
  background:gray;
  color:white;
  width:400px;
  height:400px;
  display:flex;
  flex-direction:column;
}
.content{
  flex:1;
  overflow:auto;
}

<div class="container">
  <h1 class="header">header</h1>
  <div class="content">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div>
</div>

试图让标题贴在DIV的顶部并在其下方滚动内容

1 个答案: