CODEWITHSUNDEEP
htmlcssflexbox
sgouros
sgouros

Reputation: 494

I cannot set height after flex-direction: column

I've just started using Flexbox and bumped into a problem.

If I set a <section> as flex-direction: column, then it stops responding to the height attribute.

Here's the relative code:

body {
  display: flex;
  background: #d6d6d6;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  width: 94px;
  height: 100vh;
  background: #131519;
  background: #1C1D21;
  color: white;
}

.main-aside-footer-section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  .
  /*** THIS IS NOT WORKING ****/
  height: 100vh;
  /****************************/
}

.main-aside-section {
  display: flex;
}

main {
  display: flex;
  background: #83B0B9;
  background: #343943;
  background: #E4B162;
  background: #D35657;
  flex-grow: 1;
}

aside {
  display: flex;
  background: #343943;
  min-width: 50px;
  color: white;
  /*    display: none;*/
}

footer {
  display: flex;
  background: #333;
  color: #ededed;
}
<nav>
  <ul>
    <li>nav 1</li>
    <li>nav 2</li>
  </ul>
</nav>

<section class="main-aside-footer-section">

  <section class="main-aside-section">
    <main>
      this is main
    </main>

    <aside>
      <ul>
        <li>aside 1 </li>
        <li>aside 2 </li>
      </ul>
    </aside>

  </section>
  <!-- main-aside-->

  <footer>footer</footer>

</section>
<!-- main-aside-footer-->

https://codepen.io/anon/pen/qRepJr

What I need is to vertically stretch the .main-aside-footer-section element so that it fills the screen's height (and so that my footer sticks to the bottom of the page).

I am using Chrome Version 53.0.2785.101 (64-bit) on Ubuntu 15.10 64bit

Can anybody help?

Thanks in advance

Upvotes: 1

Views: 3042

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371689

Actually, the height works fine. Wrap a border around the element to see:

revised codepen

Just add margin-top: auto to the footer:

revised codepen

Here are a couple of posts that provide more details:

Upvotes: 2

duvigneau
duvigneau

Reputation: 201

.main-aside-footer-section {
    display: flex;
    flex-direction: column;
    flex: 1;
}

footer {
    flex: 1;
}

https://codepen.io/anon/pen/PWMQGV

This stretches the footer to fill the remaining space for your .main-aside-footer-section

Upvotes: 0

Related Questions