ブートストラップ4：カードを縦横に中央に置くが、画面にはこぼれないようにする。

Question

私は、縦と横を中心とした1枚のカードしか持っていない。カードにはフォームとテキストが入っています。ユーザーはフォームを送信し、リストを取得します。場合によってはリストが長くなり、カードがスクロールすることなく上端で切り取られます。それはトップにぶつかって流出しないようにとにかくありますか？私はパディングトップを使用しようとしましたが、幅にパーセントを適用することは望ましくなく、固定値は異なるスクリーンサイズには適していません。

CSS

html, 
    body { 
     height: 100%; 
    } 

    .container, 
    .row.justify-content-center.align-items-center { 
     height: 100%; 
     min-height: 100%; 
    } 

全例：http://jsbin.com/madigarixu/edit?html,css,output

Answer 1

を試してみてください。また、固定トップのナビゲーションバーにはボディパッディングが必要です。あなたがオフスクリーンこぼさない何を意味

body { 
    padding-top:50px; 
} 

.container, 
.row.justify-content-center.align-items-center { 
    min-height: calc(100vh - 50px); 
} 

http://codeply.com/go/pdqcX2t51x

Answer 2

あなたが代わりにmin-heightを使用することができ、この

html, 
    body { 
     height: 100%; 
    } 

    .container, 
    .row.justify-content-center.align-items-center { 
     height: 100%; 
     min-height: 100%; 
    } 
    .justify-content-center { 
    min-height:auto !important; 
    height:auto !important; 
    } 

jsfiddle link update your code