0

I got a layout to work in CSS but I don't understand why it works. CSS experts, please shed light on what's going on here.

My goal was to have a layout like this:

desired layout

The salient features are:

  1. Fixed height header and footer at the top and bottom of the window
  2. A content area taking up the full space between the header and footer
  3. The content area has its own scrollbar (i.e. it doesn't push the footer down past the bottom of the screen).

I made it happen using a combination of css flex box and a div inside the content div with 0% height. Against my expectation, the 0% height div stretches to the full available height.

Here's a JSFiddle: http://jsfiddle.net/2wunC/ (it doesn't look quite right because the outer height:100% doesn't make sense inside the jsfiddle container).

HTML

<div id="everything">
  <div id="header">fixed-height header</div>
  <div id="workspace">
    <div class="docstretch"><div class="docwindow">
      filler text<br>filler text<br>filler text<br>...
    </div></div>
  </div>
  <div id="footer">fixed-height footer</div>
</div>

CSS

#everything {display:-webkit-flex;-webkit-flex-flow:column;-webkit-align-items:stretch;height:100%;}
#header {height:2em;background:lightgray;}
#footer {height:2em;background:darkgray;}
#workspace {-webkit-flex:1 0 auto;display:-webkit-flex;-webkit-flex-flow:row;}
.docstretch {background:#05c;color:white;width:300px;overflow-y:scroll;}
.docwindow {height:0%;} /* why does this work? */

My question: the nested divs (docstretch and docwindow) with the inner div having height:0% created the content div I wanted, taking up the full 'interior space' of the page and having its own scrollbar. But why? And is this a safe solution?

amwinter
  • 3,121
  • 2
  • 27
  • 25
  • do you want like this... http://babysoftblog.com/tablet/eco_energy/ – SaurabhLP Apr 04 '13 at 06:20
  • no -- the eco_energy template interior seems to remain a set height. I want the scrollbar to always take up the full space between header and footer. – amwinter Apr 04 '13 at 18:26
  • 1
    There *is* an instance where Flexbox can be used to get a similar result using a zero height element, but it only works with column orientation. See this question: http://stackoverflow.com/questions/14962468/flexbox-and-vertical-scroll-in-a-full-height-app-using-newer-flexbox-api – cimmanon Apr 04 '13 at 19:20
  • oops, my situation is exactly the same as the answer you linked. I do have a column orientation -- the flex-flow:row is applying to the sub-elements, it's cruft from a more complicated example. – amwinter Apr 04 '13 at 19:31
  • @amwinter i have tried this by css but i didnt success, maybe some custom jquery would help... i am sure... – SaurabhLP Apr 05 '13 at 05:45

1 Answers1

0

If you take away all of the Flexbox properties, you'll see that it has nothing to do with Flexbox at all:

http://jsfiddle.net/2wunC/2/

The problem is that you have height: 0%. Drop the % and it works as you would expect:

http://jsfiddle.net/2wunC/1/

cimmanon
  • 67,211
  • 17
  • 165
  • 171