Flexbox - display both header and footer

Question

Just starting my flexbox journey.

I have a very simple layout that I wish to style for mobile. They layout has the following structure:

<div class=wrap>
     <header></header>
     <article>lots of text here</article>
     <footer></footer>
</div>

I want to display both the header and the footer at the top and bottom of the page respectively. The article will contain too much text to display on the screen so the user will have to scroll this up or down.

The header and footer can both be set to 40px.

How to style this using flexbox?

The following is start:

.wrap {
  border:1px solid rgba(250,0,0,1);
  display: flex;
  flex-direction: column;

}


header {
  background: lightgreen;
  height: 40px;
}

article {
  background: grey;
}



footer {
  background: gold;
  height: 40px;
}

<div class="wrap">

  <header>header</header>

  <article>
    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

  </article>

  <footer>footer</footer>

</div>

But when the vertical size is small...either the header or the footer (or both) dissapears.

I want both to remain.

Thanks,

Mark

score 0 · Accepted Answer · answered Mar 17 '19 at 02:17

If you want your header and footer to be present on the screen always, you should use position: absolute or position: fixed for them.

If your .wrap is a full-width, full-height on a page, the code will look like that (Note, that flexbox isn't a tool for your task).

.wrap {
  border:1px solid rgba(250,0,0,1);
  width: 100%;
  height: 100%;
  position: relative;
  padding: 40px 0;
  box-sizing: border-box;
}


header {
  background: lightgreen;
  height: 40px;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

article {
  height: 100%;
  background: grey;
}

article p:first-child {
  margin-top: 0;
}

footer {
  background: gold;
  height: 40px;
  
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="wrap">

  <header>header</header>

  <article>
    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

  </article>

  <footer>footer</footer>

</div>

Same solution with position: fixed

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

.wrap {
  width: 100%;
  height: 100%;
  border:1px solid rgba(250,0,0,1);
}


header {
  background: lightgreen;
  height: 40px;
  position: fixed;
  top: 1px;
  width: 100%;
}

article {
  padding: 40px 0;
  background: grey;
}



footer {
  background: gold;
  height: 40px;
  position: fixed;
  bottom: 1px;
  width: 100%;
}

<div class="wrap">

  <header>header</header>

  <article>
    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

  </article>

  <footer>footer</footer>

</div>

@markthekoala I closed this as a dupe and linked to two different posts showing two ways to scroll content, and both use Flexbox alone. — Asons, Mar 17 '19 at 09:41
@LGSon I am not "back to zero" thats a bit cynical. Thanks for linking the other two solutions -- I will look at them and learn! — markthekoala, Mar 17 '19 at 10:30
@LGSon I don't know why you so rude to me and to Author, but looks like you don't fully understand HTML/CSS. Flexbox is a great tool and I encourage author to learn it further, but it shouldn't be used everywhere. And fixed header/footer layout is indeed that case where `flex` doesn't help much. `position` is a right tool here. Also, please, note that fact in my answer. Learning flexbox doesn't mean learning it's syntax only. It also mean that you will know where to use it or not. — flppv, Mar 17 '19 at 10:45
@markthekoala btw this is a great link to catch up with flexbox properties https://flexboxfroggy.com — flppv, Mar 17 '19 at 10:53
@flppv Positioning (using fixed/absolute) doesn't allow dynamic sizing of header/content/footer which Flexbox does, so no question about which one is better. Also, telling a solution is a bad one is not rude, it is just my opinion, and especially when user asks for Flexbox. Telling me I do not fully understand HTML/CSS is rude though. — Asons, Mar 17 '19 at 11:03
"you are back to zero" is rude. Delete it if you didn't mean to be so. Let's keep community tidy and encourage learners and answerers. I am happy that you have enough rep to close someone's question and give him links to your own answers, but looks like author's problem were solved without that. — flppv, Mar 17 '19 at 11:06

Flexbox - display both header and footer

1 Answers1