Off Canvas side bar in Rails CSS styling

Question

Im adding an off canvas devise login sidebar to my rails app.

I've managed to make it almost work properly by taking bits and pieces from various tutorials and mix it with my own code.

in my views/layouts/application.html.erbI render a partial which contains the devise login form <%= render 'login' %> the partial is hidden left: -300px; until the user clicks a login button in the menu <a href="#" class="toggle-nav">Log in</a> then it slides gently from the left side on to the viewport. That is all working very smoothly but adjusting the height of the "login sidebar" is a problem.

the code for the _login.html.erb is

    <div id="site-canvas">

        <div id="site-menu">
        <%= form_for(:user, :url => session_path(:user)) do |f| %>
          <div class="form-group red">
            <%= f.label :email %>
            <%= f.text_field :email, class: 'form-control' %><br>
            <br>
            <%= f.label :password %>
            <%= f.password_field :password, class: 'form-control'  %><br>
            <br>
            <%= f.check_box :remember_me %>
            <%= f.label :remember_me %><br>
            <p><%= f.submit 'Sign in' %></p><br>
            <br>
            <%= link_to "Forgot your password?", new_password_path(:user) %>
          </div>    
        <% end %>
        </div>


    </div><!-- #site-canvas -->
  </div><!-- #site-wrapper> -->

The login form is working nicely but the styling seems to be a problem, at least I haven't managed to style it properly yet so the loggin partial spans the whole height of the viewport, and I have spent almost the whole day doing it. ( I´ve googled, checked out various tutorials, made my own changes, searched on stack overflow, etc. )

this is the ´css´for the partial.

#site-wrapper {
position: relative;
height:100%;
width: 100%;


}

#site-canvas {
  width: 100%;
  height: 100%;
  position: relative;

  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: .3s ease all;
  transition: .3s ease all;


}

#site-menu {
  margin-top: 57px;
  width: 300px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -300px;
  background: rgba(255, 255, 255, .7);
  padding-top: 100px;
  padding-left: 20px;
}

#site-wrapper.show-nav #site-canvas {
  -webkit-transform: translateX(280px);
  transform: translateX(280px);
}

.red{

  background: rgba(255, 255, 255, .7);
  padding: 50px 20px 220px 20px;
}

this .red class is a class I made during one of my many attempts to make the login form background span the whole height of the viewport. And I´m pretty sure that is not the right way.

this code in application.js controls the toggle

$(function() {
  $('.toggle-nav').click(function() {
    // Calling a function in case you want to expand upon this.
    toggleNav();
  });
});



function toggleNav() {
if ($('#site-wrapper').hasClass('show-nav')) {
  // Do things on Nav Close
  $('#site-wrapper').removeClass('show-nav');
} else {
  // Do things on Nav Open
  $('#site-wrapper').addClass('show-nav');
}

//$('#site-wrapper').toggleClass('show-nav');
}

** EDIT**

here is a link to heroku https://hlinreykdal.herokuapp.com/

It would be so much appreciated if someone could check this out and guide me to the right path.