W3C home > Mailing lists > Public > www-style@w3.org > March 2013

Re: Holy grail layout using Flexbox

From: Mark <markg85@gmail.com>
Date: Wed, 27 Mar 2013 09:14:24 +0100
Message-ID: <CAPd6JnFK4xNPxBgXBwcrJGzPiFq=nthekYNiBu=GXWzSAAsxJw@mail.gmail.com>
To: fantasai <fantasai.lists@inkedblade.net>
Cc: www-style@w3.org
On Wed, Mar 27, 2013 at 12:56 AM, fantasai
<fantasai.lists@inkedblade.net> wrote:
> On 03/26/2013 03:38 PM, Mark wrote:
>> Hi,
>> I'm playing with flexbox under chrome in an attempt to see how easy it
>> is to get the "holy grail layout" working. For those that don't know,
>> the holy grail layout is (as far as i understand it) a layout with:
>> - 1 Header
>> - 1 Footer
>> - 2 or 3 columns
>> By default it shows at 100% if there is too little to bring it at 100%
>> once the content is bigger then the 100% it stretches. So the footer
>> moves down and the content stretches (the columns).
>> The HTML/CSS that i made shows is a near perfect holy grail layout.
>> However, i seem to be having some magic white space that doesn't seem
>> to be going away. While the align-content is set to stretch.. It seems
>> to show as if it where set at space-between. So now i'm wondering if
>> this issue is in my HTML or if i just found a bug in the webkit
>> rendering for the flexbox spec?
> I think what's happening is that the flex lines are stretching,
> but since the footer and the header are not stretchable, they
> don't stretch to fit their line: the line just stretches and
> leaves white space.
> To make this layout in Flexbox you need to put a wrapper around
> <nav> and #content. Make that a row flexbox inside a column flexbox.
> ~fantasai

Hi all,

Thank you very much for the very helpful reply's thus far!
As for the provided solutions, all work and fail in some way :) So i
will answer each solution below to clear things up.

@Tab atkins
Your solution works. However, the <nav> element (which should show
before the <div id="content"> element is completely gone in your
solution. Is there a way to get that one showing again? If that would
be possible then your solution is perfect i guess.

@Tony Chang
Your solution also works, but it loses the fixed height header and
footer. They become dynamic which is not the intention.

I haven't tried your solution because it involves making a wrapper
div. I think wrapper divs should not be needed anymore in todays
bleeding edge CSS3. I know that doing something like:
<div id="wrapper">
  <div id="col1"></div>
would probably work just fine because <div id="wrapper"> would in fact
only contain singleline stuff as far as flexbox is concerned. But that
is - in my opinion - not a neat solution.

Please do remember that the intention is to have a fixed height header
and footer. All content in between that should stretch and fill up to
take the full screen height (including the header and footer) if there
is too little information.

Kind regards,
Received on Wednesday, 27 March 2013 08:15:12 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:09 UTC