在全高下显示 div，背景从 div 上方显示答案

【问题标题】：Show div under full-height with background from above div在全高下显示 div，背景从 div 上方显示
【发布时间】：2015-10-06 04:31:33
【问题描述】：

我得到了一个带有垂直居中文章的全高标题。这需要首先可见
然后我得到了一个带有 tekst 的部分。此部分需要在标头之后可见，以便全高标头首先在任何设备上可见，然后是 tekst。

但是当您向下滚动到带有 tekst 的部分时，标题的背景需要扩展。

谁能帮帮我？

header 必须保持 100% 高度，不固定并首先显示，并且文章保持垂直居中，当您向下滚动时，带有 tekst 的部分需要具有 header 的背景 em>

小提琴：https://jsfiddle.net/och52kgL/7/

HTML：

<body>
    <header>
        <article>
            Centered title comes here
        </article>
    </header>
    <section>
        Text under window height comes here
    </section>
</body>

CSS：

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

header {
    background: url('http://lorempixel.com/1920/1080/');
    height: 100%;
}

article {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

section {
    background: green;
    margin: 20px;
}

【问题讨论】：

你的问题比较模糊，请尽量解释清楚
改了帖子现在清楚了吗？
这是您需要的吗？ - jsfiddle.net/och52kgL/10

标签： css responsive-design

【解决方案1】：

我不确定我是否完全理解，但这就是你要找的吗？

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

header {
  background: red;
  height: 100%;
  width:100%;
  position:fixed;
}

article {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

section {
  background: green;
  padding: 20px;
  position:relative;
  top:100%;
}

<body>
  <header>
    <article class="vertical-center">
      Centred title comes here
    </article>
  </header>
  <section>
    Text under window height comes here
  </section>
</body>

你的评论让我相信你想要更多类似的东西

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  background-image: url('http://lorempixel.com/1920/1080/');
  background-repeat: no-repeat;
  background-attachment: fixed;
}
header {
  height: 100%;
  width: 100%;
}
article {
  position: relative;
  top: 50%;
  background: red;
  transform: translateY(-50%);
}
section {
  background: green;
  padding: 20px;
  position: relative;
  top: 100%;
}

<body>
  <header>
    <article class="vertical-center">
      Centred title comes here
    </article>
  </header>
  <section>
    Text under window height comes here
  </section>
</body>

【讨论】：

是的，但是文章（垂直居中）需要滚动，以便为带有文本的部分腾出空间

【解决方案2】：

您可以将标题高度设置为：

高度：计算（100% + 50px）；

在此示例中，50px 是您的section 的高度，然后将section 放在标题中（如果我理解得很好，他们共享相同的background-image）并将其定位为absolute bottom:0

如果section 将具有动态内容（未知高度），那么您可能需要使用 jquery 计算加载高度并通过脚本设置相同的cal(100% + XXpx);。

FIDDLE

已编辑：如果您的 sectioncontent 将是动态的，请不要将任何 height 设置为您的 header，而是在页面加载时使用此 jquery：

var sectionHeight = $('section').outerHeight(true );
$('header').css('height', 'calc(100% + ' + sectionHeight + 'px');

这基本上会计算你的section的高度，然后加到header加上100%

更新FIDDLE /尝试更改section的内容并再次按“运行”。

【讨论】：

没错，但问题是我永远不知道高度。我需要追加，因为它需要响应，并且在小型设备上文本会分解并且 div 不是高度。
更新了我对动态内容的回答

【解决方案3】：

将background: red; 放在body 上。

【讨论】：

再读一遍问题，这不是他想要的。
嗯...那将替换白色，整个页面将有背景，有什么问题？
我用图像背景改变了我的小提琴。我用红色演示，但文字需要在标题图像的顶部。
好的，让我们使用图片：jsfiddle.net/och52kgL/6。正文的单个背景图片，上面有文字