css - 固定标题在渐变体上(移动网页)

Question

我想知道如何在具有渐变背景(具有可滚动内容)的主体上设置固定标题。我不想为页眉设置背景颜色，因为它会扰乱页面外观，因为我希望主体的背景以全尺寸显示。

我在 body 标签上使用渐变背景，像这样:

body {
background:radial-gradient(ellipse at center, rgba(89,72,97,1) 0%, rgba(57,46,63,1) 100%);
}

我有一个粘性标题:

.header {
    line-height: 45px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

还有可滚动的内容:

.content-wrapper {
    height: 100%;
    text-align: center;
    width: 100%;
}
.content-wrapper .content-wrapper-inner {
    height: 100%;
    overflow: auto;
}

我知道我可以为 .content-wrapper 设置 padding-top 但它在 iOS 中以不同方向等方式查看时表现不佳。 另外我想避免 position:fixed 因为它在 iOS 的 Safari 中也不能正常运行。当您尝试滚动整个页面时，正文的背景会被拖动，但页眉会保留在原位，背景颜色为空白。

抱歉没有 Jsfiddle/Codepen 因为我无法设置径向渐变背景。

Answer 1

如果您尝试将内容放在 header 下方，而 header 是固定，那么您可以尝试以下解决方案之一:

<强>1。偏移内容

添加一个 margin-top 到等于标题高度 (45px) 的内容:

.content-wrapper {
    ⋮
    margin-top: 45px;
}

jsFiddle:https://jsfiddle.net/azizn/xj8qg5mj/

* 这也适用于 padding、position-top 等

---

<强>2。让header继承body背景

.header {
    ⋮
    background: inherit;
    background-attachment: fixed;
}

jsFiddle:https://jsfiddle.net/azizn/ga7ndq8c/

fixed background-attachment 确保渐变不会停止在标题的高度，而是表现得好像设置在主体上一样，查看区别:

更新:由于您需要在 Android 上支持 Chrome，因此您可以使用替代方法: header 的伪元素 (::before) 获取背景并且高度等于 100%视口(viewport)(100vh)

.header {
  ⋮
  background: inherit;
}

.header::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: inherit;
  height: 100vh;
  z-index:-1;
}

jsFiddle:https://jsfiddle.net/azizn/ejg6sdmw/

---

<强>3。摆脱固定位置

如果您将标题保持在静态位置并让内容包装器在其内容滚动时填充剩余的视口(viewport)空间，您可能会获得相同的结果:

html, body {
  margin: 0; padding: 0;
  height: 100%; color: #FFF;
}

body {
  background: radial-gradient(ellipse at center, rgba(89, 72, 97, 1) 0%, rgba(57, 46, 63, 1) 100%);
  text-align: center;
}

.header { line-height: 45px; }

.content-wrapper { height: calc(100% - 45px); }

.content-wrapper .content-wrapper-inner { height: 100%; overflow: auto; }

.long {
  border: 1px dashed #CCC;
  padding: 1em;
  margin: 1em;
  min-height: 600px;
}

<div class="header">header</div>

<div class="content-wrapper">
  <div class="content-wrapper-inner">
    <div class="long">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nemo repudiandae alias iure minima officiis eligendi minus dignissimos. Dolore eos, assumenda voluptatibus quidem sequi architecto suscipit. Doloremque, illo modi totam.</p>
      <p>Laborum reprehenderit deserunt tempora et minima animi atque libero aliquam, nesciunt perferendis omnis ipsam nostrum impedit quia neque adipisci amet quis corporis assumenda! Eveniet fugit quo pariatur officia et totam.</p>
    </div>
  </div>
</div>

这似乎是最简单直接的解决方案。

jsFiddle:https://jsfiddle.net/azizn/uwuL51zg/