Question

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

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

有人能帮助我吗？

有必要将标题保持100％高度，不固定并首先显示并且文章保持垂直居中，当您向下滚动时，带有tekst的部分需要从标题中获得背景

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

Answer 1

我不确定我完全理解，但这是你正在寻找的吗？

＆＃13;

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

＆＃13;

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

＆＃13;

您的评论让我相信您想要更像

的内容

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

身高：计算（100％+ 50px）;

在此示例中，50px是getItem(int position)的高度，然后将@Override public Fragment getItem(int position) { switch(position) { case 0: return TextFragment.newInstance(); case 1: return ImageFragment.newInstance(); case 2: return ButtonFragment.newInstance(); } }放在标题内（因为，如果我表现良好，他们将共享相同的section）并使用section

定位background-image

如果absolute将具有dinamic内容（未知高度），则可能需要使用jquery来计算高度onload并通过脚本设置相同的bottom:0。

<强> FIDDLE

已编辑：如果您的section内容属于dinamic，请不要将cal(100% + XXpx);设置为section，并且必须使用此jquery在页面加载：

height

这基本上会计算header的高度，然后添加到var sectionHeight = $('section').outerHeight(true ); $('header').css('height', 'calc(100% + ' + sectionHeight + 'px');加section

更新 FIDDLE /尝试更改header的内容，然后按＆＃34;运行＆＃34;试。

Answer 3

将background: red;放在body上。

在div以上的背景下显示div的全高度

3 个答案: