How to get Bootstrap's column full browser height with fixed position?

I need to make a slide in that when the user clicks on a specific button appears from the right. And I’m making it with this html structure with Bootstrap 4:

<div class="col-md-3">
  <div class="card">
    content
  </div>
</div>

It needs to have a fixed position, I assume and a right:0; so it sticks to the right side. And I also need it to be full browser height. The thing is, if I use this CSS, it stretches the width of the card as well as the height:

.card {
 position: fixed;
 right: 0;
 height: 100%;
}

I’ve also noticed that the bottom of the content tends to be hidden on smaller screens. It’s a slide in, I need it to always be visible 100%, while still being full height. Is it possible? And if so, what am I doing wrong, and what should I be doing instead? Can someone please take a look at my code and let me know?

.card {
  background-color: #bdbdbd;
  text-transform: uppercase;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
}

.close {
  position: absolute;
  right: 0;
  background: #fff;
  opacity: 1;
  color: #29292b;
  font-size: 10px;
  text-decoration-color: #757575;
}
<link rel="stylesheet" target="_blank" rel="nofollow" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="col-md-3">
  <div class="card rounded-0 border-0">
    <div class="card-header border-0 p-0">
      <button type="button" class="close p-2">
      <span aria-hidden="true">x close</span>
    </button>
      <img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200">
    </div>
    <!-- /.card-header -->

    <div class="card-block py-4 px-3">
      <h4 class="card-title mb-2">Title</h4>
      <p class="card-text">Text
        <span>Text</span>
        <span>Text</span>
      </p>

      <h4 class="card-title mb-2">Title</h4>
      <p class="card-text">Text</p>

      <h4 class="card-title mb-2">Title</h4>
      <p class="card-text">Text</p>

      <div class="form-group">
        <textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="Placeholder text here..."></textarea>
      </div>
    </div>
    <!-- /.card-block -->

  </div>
  <!-- /.card -->
</div>

You can pull it off by adding positive and negative padding like this:

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

jsbin: http://output.jsbin.com/gajilaj