html - Keeping side menu 100% height -

i have side menu keep @ 100% page height.

the code right now:

body, html {   width: 100%;   height: 100%; }  .sidemenu {   width: 200px;   height: 100%;   float: left; } 

the problem side menus height not extend rest of page. example have input fields can added form, , when few inputs have been added form extends below original view port. while menu not.

heres jsfiddle demonstrate https://jsfiddle.net/m5yfqdsu/, click "add row" button add inputs until theyre below viewport.

so best solution keep menu @ 100% height? prefer css solution, js works if needed.

add position: fixed; .sidemenu

// quick function 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>