0

I just can't get the sidebar to work with a full height underneath the header/nav and above the footer.

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <header>
      <div class="header">
        <div class="row">
          <div class="col-3">
            <img src="img/logo.png" alt="test">
          </div>
          <div class="col-6">
            <h1>Music</h1>
          </div>
          <div class="col-3">
            <button>sign in</button>
            <button>sign up</button>
          </div>
        </div><!-- end row -->
        <nav>
          <ul>
            <li><a href="#" class="active">home</a></li>
            <li><a href="#">genres</a></li>
            <li><a href="#">artists</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>
          </ul>
        </nav>
      </div><!-- end header -->
    </header>
    <main>
      <div class="row">
        <div class="col-9">
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
        </div>
        <div class="col-3 sidebar">
          <p>test2</p>
        </div>
      </div>
    </main>
    <footer><p>Here comes the footer at the bottom of the page with 100% width</p></footer>
  </body>
</html>

Here are my HTML and CSS. I hope someone knows what the solution is. https://codepen.io/Midoriakwa/pen/wPqzZv

mx0
  • 6,445
  • 12
  • 49
  • 54
Midorikawa
  • 14
  • 6

1 Answers1

3

Your sidebar (col-3 sidebar) , has a parent element, classed row.

The row element has no explicit height set, so height: 100% won't work on the child element (col-3 sidebar).

When using height: 100%, you are saying something along the lines of:

Use 100% of the parent's height

If the parent has no height, nothing will happen.

See this question for more clarity.

justinw
  • 3,856
  • 5
  • 26
  • 41
  • i've tried to set the row's height 100% and then the sidebar but it doesn't work... – Midorikawa Nov 14 '17 at 20:04
  • That's probably because the parent of `row` doesn't have a `height`. You get it? `height: 100%` **only works** if the parent element where that rule was set has an **explicit** `height` set. – justinw Nov 14 '17 at 20:05
  • 1
    @Midorikawa Looking at your pen you don't have an explicit `height` set for any element, so `height: 100%` isn't going to work. There are better ways to accomplish this than setting `height` on every element - [take a look at flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) – justinw Nov 14 '17 at 20:07
  • html, body, main, main div.parent { height: 100%; } main div.row div.sidebar { background-color: #2c2c2c; height: 100%; } this worked thanks! – Midorikawa Nov 14 '17 at 20:08