Question

我喜欢在可变高度元素下滚动内容。这是一个CSS盲点还是我只是没有考虑一个明显的解决方案？

到目前为止Codepen尽我所能，但它只适用于Chrome和Firefox：

HTML：

<div class="sidebar">
  <header>
    <h1>Header content that I would like to remain on the screen even when the main area is scrolled down.</h1>
    <p>I want to avoid specifying a height or top padding/margin value, as the content may grow or shrink at times.</p>
    <p>This code seems to work in Chrome and Firefox but not in Safari. I haven't tested IE yet.</p>
    <p><strong>Challenge:</strong> Can we make it cross-browser?</p>
  </header>
  <main>
    <ul>
      <li>Elephant</li>
      <li>Giraffe</li>
      <li>Otter</li>
      <li>Nine-banded armadillo</li>
      <li>Cat</li>
    </ul>
  </main>
</div>

CSS：

.sidebar {
  width: 400px;
  height: 700px;
  border: 10px solid #808080;
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.sidebar header {
  background-color: #87ceeb;
  border-bottom: 10px solid #00f;
  padding: 0 1em;
}
.sidebar header h1 {
  font-size: 1.2rem;
}
.sidebar main {
  overflow-y: auto;
  -webkit-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}
.sidebar main li {
  height: 400px;
  border-right: 10px solid #ffc0cb;
  margin: 10px;
  padding: 10px;
}

Answer 1

它比你想象的容易得多。您要搜索的css代码是：

.example {
   position: fixed;
}

在my website上，您会在标题部分看到相同的结果。即使您向下滚动，它也会保持在顶部。：）

Answer 2

我认为这就是你想要的http://codepen.io/dirtysmith/pen/jqyKBO

CSS

.sidebar header {
  background-color: #87ceeb;
  border-bottom: 10px solid #00f;
  padding: 0 1em;
  position: fixed;
  width: 368px;
}

添加了一个宽度以匹配容器，并且位置已固定。

CSS：在内容的其余部分滚动时保留在屏幕上的标题

2 个答案: