ブートストラップの列のブラウザの高さを固定位置で取得する方法は？

Question

ユーザーが特定のボタンをクリックしたときに右から表示されるスライドを作成する必要があります。そして、私はブートストラップ4でこのhtml構造で作っています：

固定位置をとる必要があります。それは右側に固執します。また、ブラウザの高さをフルにする必要があります。事は、私はこの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