如何以固定位置获得 Bootstrap 的列完整浏览器高度？

Question

我需要幻灯片，当用户单击特定按钮时，从右侧出现特定按钮。我正在使用Bootstrap 4：

使用此HTML结构来制作它。

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

我假设它需要一个固定的位置，并且是一个右：0;因此它坚持在右侧。而且我还需要它是完整的浏览器高度。问题是，如果我使用此CSS，它会延伸卡的宽度以及高度：

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

我还注意到内容的底部往往隐藏在较小的屏幕上。这是一个幻灯片，我需要它始终可见100％，而仍然保持全高。是否可以？如果是这样，我在做什么错，我应该做什么？有人可以看看我的代码并让我知道吗？

.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" 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>

Answer 1

您可以通过添加正面和负面填充来将其取消：

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

JSBIN：http：//output.jsbin.com/gajilaj