修正了渐变体上的标题（移动网页）

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

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

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

Answer 1

如果您尝试将内容设置在标题下方，而标题为fixed，则可以尝试以下解决方案之一：

<强> 1。抵消内容

将margin-top添加到内容等于标题高度（45px）：

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

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

*这也适用于填充，位置顶部等

<强> 2。使标题继承正文背景

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

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

fixed背景附件确保渐变不会停留在标题的高度，而是表现得像在主体上设置一样，请参见差异：

更新：由于您需要支持Android上的Chrome，您可以使用替代方法：标头的伪元素（::before）获取背景，其高度等于视口的100％（{{1 }}）

100vh

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

第3。摆脱固定的位置

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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