CSS: Facebook Messages 喜欢布局

Question

我正在尝试创建类似于 Facebook 消息页面的网页布局，具有固定高度的页眉和页脚以及灵活高度的主要元素。

内部主要元素必须是：

div（主元素的 100% 高度。）溢出时可滚动
div（主元素的 100% 高度。减去下面的 div）并且在溢出时可滚动
div 固定高度低于第二个并且在主元素的底部。

我使用 flexbox 创建了基本布局，但是那些 divs 呢？

这是一支笔：http://codepen.io/anon/pen/GJLOrL?editors=110

对不起英语

enter code here

Answer 1

巧妙地使用 positions，我们可以通过 IE 6 兼容性来实现这一点。

片段

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}

body {padding: 45px 0;}

header, footer {position: fixed; padding: 10px; background-color: #999; text-align: center; top: 0; left: 0; right: 0; height: 25px;}
footer {bottom: 0; top: auto;}

main {width: 100px; background-color: #ccc; height: 750px;}
.main {position: fixed; left: 100px; top: 45px; background-color: #ccf; bottom: 45px; right: 150px;}

<header>Header</header>
<main>Main</main>
<div class="main">DIV.Main</div>
<footer>Footer</footer>

Answer 2

纯粹作为智力练习...flexbox

html {
  height: 100%;
}
body {
  height: 100%;
  margin:0;
  padding:0;
}
.wrapper {
  height: 100%;
  background: PaleGoldenrod;
  display: flex;
  flex-direction: column;
}
header,
footer {
  background: lightgrey;
  flex: 0 0 50px;
}
main {
  flex: 1;
  width: 80%;
  margin: auto;
  border: 1px solid grey;
  display: flex;
  justify-content: space-between;
}
.col {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
}
.colcontent {
  flex: 1;
  background: white;
  overflow-y: auto;
}
.colfoot {
  background: green;
  flex: 0 0 50px;
}

<div class="wrapper">
  <header></header>
  <main>
    <div class="col">
      <div class="colcontent">
      </div>
    </div>
    <div class="col">
      <div class="colcontent">
      </div>
      <div class="colfoot"></div>
    </div>
  </main>
  <footer></footer>
</div>

Codepen Demo 溢出

CSS: Facebook Messages 喜欢布局

CSS: Facebook Messages like layout

html

css

scrollable

flexbox