CSS: Facebook Messages like layout

Question

I'm trying to create web layout similar to Facebook's Messages page with fixed height header and footer and flexible height main element.

Inside main element has to be:

div (100% height of main elem.) and scrollable when overflow
div (100% height of main elem. minus div below) and scrollable when overflow
div with fixed height below second one and at the bottom of main elem.

I created basic layout with flexbox but what about those divs?

Here is a pen: http://codepen.io/anon/pen/GJLOrL?editors=110

Sorry for english

enter code here

I'm voting to close this question as off-topic because we're not a freelance coding service. — ceejayoz, Aug 13 '15 at 14:50
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself.** NB - **Please don't abuse the code blocks to get around this requirement**. — Paulie_D, Aug 13 '15 at 14:52
Sorry, but I didn't want to paste here some ambiguous code so I better created pen. I've tried wrap all divs in parent one and create "another flexbox inside flexbox" but without success. I'm quite newbie with it. — hovado, Aug 13 '15 at 15:14

score 1 · Accepted Answer · answered Aug 13 '15 at 15:11

Purely as an intellectual exercise...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 with overflow

Thank you very much Paulie, exactly what I need. – hovado Aug 13 '15 at 15:21 — hovado, Aug 13 '15 at 15:21

score 0 · Answer 2 · answered Aug 13 '15 at 15:08

Using positions in a cunning way, we can achieve this with IE 6 compatibilty.

Snippet

* {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>

CSS: Facebook Messages like layout

2 Answers2