3 使用 flex css 的窗格布局，即使在页面滚动时，标题也始终保持在顶部 [关闭]答案

【问题标题】：3 Pane layout using flex css with header staying always on top even on page scroll [closed]3 使用 flex css 的窗格布局，即使在页面滚动时，标题也始终保持在顶部 [关闭]
【发布时间】：2016-12-03 09:09:53
【问题描述】：

我正在尝试为我的网页设置一个 3 窗格布局。即使在页面滚动时，标题也会始终保持在顶部，并且具有固定的高度。

页脚将有一个固定的高度并保持在底部，但不会在页面滚动时固定在视口的底部，我的意思是如果中心区域的内容超过高度，页脚可以向下移动而不是粘在视口上底部。

中间的内容区域会在窗口调整大小时自动调整，以便完全占据所有剩余的剩余空间。

如果使用 flex CSS 会更好，或者如果其他方法很好，则更好。我自己用 flex 尝试过，但如果中心区域的内容高度不同，那么在调整窗口大小时，整个布局的行为会很奇怪。粗略的想法见附图。

如果你回答了这个问题，请提供一些工作小提琴。

【问题讨论】：

标签： css layout flexbox pane

【解决方案1】：

Header = 已知高度和粘性
内容 = 可变高度
页脚 = 已知高度和底部（如果内容增长而不是坚持内容）

使用 CSS calc

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

header{
  position: fixed;
  z-index:10;
  top:0;
  height:50px;
  width:100%;
  background: hsl(0, 80%, 70%);
}

main{
  position:relative;
  padding-top: 50px; /* header height */
  min-height: calc(100vh - 80px); /* 100vh - header - footer */
  background: hsl(150, 80%, 70%);
}

footer{
  position:relative;
  height:30px;
  background: hsl(200, 80%, 70%);
}

<header>This is header 50px</header>
<main>Main content calc px (addd long content and footer will follow)</main>
<footer>Footer 30px</footer>

【讨论】：

谢谢，明天将在我的应用程序中检查它 n 让你知道。想知道您对每个 stackoverflow 问题都投反对票。
@FaisalMushtaq :) 不客气！ P.S：如果提出问题的人首先展示解决他们自己问题的最佳代码尝试，则不会；）How to Ask 并创建一个minimal reproducible example。编码愉快！