Keeping side menu 100% height

Question

I have a side menu which i would like to keep at 100% page height.

The code is basically just like this right now:

body,
html {
  width: 100%;
  height: 100%;
}

.sideMenu {
  width: 200px;
  height: 100%;
  float: left;
}

The problem with this is that the side menus height does not extend with the rest of the page. For example I have input fields that can be added to a form, and when a few inputs have been added the form extends below the original view port. While the menu does not.

Heres a jsfiddle to demonstrate https://jsfiddle.net/m5yfqdsu/, click the "add row" button to add inputs until theyre below the viewport.

So what is the best solution to keep the menu at 100% height? Prefer a CSS solution, but JS works as well if needed.

http://stackoverflow.com/questions/20285686/how-to-make-sidebar-with-same-height-as-the-content-div Try this — Ranjan, Jul 12 '16 at 13:01

score 5 · Accepted Answer · answered Jul 12 '16 at 13:06

Add position: fixed; to .sideMenu

// just a quick function to add more inputs

$(document).ready(function() {
  $(".add").on("click", function() {
    $("fieldset").append("<div class='rowContainer'><label>Label:</label><input type='text' /></div>");
  });
});

* {
  margin: 0;
  padding: 0
}

body,
html {
  width: 100%;
  height: 100%;
}

fieldset {
  padding: 10px;
}

.sideMenu {
  width: 200px;
  height: 100%;
  background-color: #1c1c1c;
  position: fixed;
  top: 0;
  left: 0;
}

.wrapper {
  margin-left: 200px;
}

input {
  width: 100%;
  max-width: 400px;
  height: 40px;
  display: block;
  margin-bottom: 20px;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sideMenu"></div>

<div class="wrapper">

  <h1>Page Title</h1>
  <form>
    <fieldset>

      <div class="rowContainer">
        <label>Label:</label>
        <input type="text" />
      </div>

      <div class="rowContainer">
        <label>Label:</label>
        <input type="text" />
      </div>

      <div class="rowContainer">
        <label>Label:</label>
        <input type="text" />
      </div>

    </fieldset>
  </form>

  <button class="add">Add row</button>
</div>

Randy · Answer 2 · 2016-07-12T13:12:11.663

You can solve this in multiple ways.

One way is to make a container having 100% height, making its child elements scrollable. That way you don't need the actual absolute rule, but it does achieve the same result. I prefer not using absolute because that makes it easier if you want it to be responsive eventually.

That way, you can scroll the sidebar and content seperatly. Both won't be bigger then they need to be. If the sidebar grows, it will be scrollable too.

* {
  margin:0;
  padding:0;
}

html, body, .wrapper {
  height:100%;
}

.wrapper {
  position:relative;
  overflow-y:hidden;
}

.sidebar {
  width:100px;
  float:left;
  height:100%;
  overflow-y:auto;
  background-color:red;
}

.content {
  width:300px;
  float:left;
  height:100%;
  overflow-y:auto;
  background-color:blue;
}

.spacer {
  height:1000px;
}

<div class="wrapper">
  <div class="sidebar">
    sidebar
  </div>

  <div class="content">
    content
    <div class="spacer">
      spacer
    </div>
  </div>
</div>

Keeping side menu 100% height

2 Answers2