css - 如何使子页眉元素与视口(viewport)底部或下方高度未知的页脚粘在一起

Question

我有一个 fiddle 来描述我的问题: https://jsfiddle.net/ajbrun/yaq13ghu/7/

我希望高度未知的页脚(绿色)始终位于页面底部或下方(如果被内容推送)。我还希望在滚动过红色标题横幅后将黄色导航栏粘在页面顶部。不幸的是，我无法让这两种情况同时发生。

使用我的示例，如果 flexbox 被注释掉，则页眉导航栏是粘性的，但这会阻止页脚在没有内容时位于视口(viewport)底部。启用 flexbox 后，页眉导航栏不再是粘性的，但页脚可以正常工作。

有没有办法让这两种情况一起工作？

html {
  height: 100%;
}

body {
  /* Without this line, the yellow navbar is sticky. With it, the footer is sticky. */
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  width: 100%;
}

header {
  display: inline;
  width: 100%;
}

.header__banner {
  height: 50px;
  background: red;
}

.header__navbar {
  height: 50px;
  background: yellow;
  position: sticky;
  top: 0;
}

main {
  height: 500px;
  /* Amend this to simulate content */
  background: blue;
  width: 100%;
}

footer {
  margin-top: auto;
  height: 50px;
  background: green;
  width: 100%;
}

<header>
  <div class="header__banner">

  </div>
  <div class="header__navbar">

  </div>
</header>
<main>

</main>
<footer></footer>

Answer 1

我想你可以删除 <header>实现您的目标。

<div class="header__banner">

</div>
<div class="header__navbar">

</div>
<main>

</main>
<footer></footer>

它可以让导航栏变粘，也可以让<footer>在底部同时 <main>高度为 0。

此外，您可以查看this question

或者，如果你想保留 <header> ，一个解决方案是，制作<header>粘，并用js监听scroll事件，所以当用户向下滚动时，header__banner的 height将减少:

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  width: 100%;
}

header {
  display: inline;
  width: 100%;
  position: sticky;
  top: 0;
}

.header__banner {
  height: 50px;
  background: red;
  overflow: hidden;
}

.header__navbar {
  height: 50px;
  background: yellow;
}

main {
  height: 1500px;
  background: blue;
  width: 100%;
}

footer {
  margin-top: auto;
  height: 50px;
  background: green;
  width: 100%;
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY
  let height = 50 - last_known_scroll_position
  if (height < 0) height = 0
  document.getElementsByClassName("header__banner")[0].style.height = height + "px"
});