ブートストラップでのパディング4 100％の高さを持つフレックスコンテナ

Question

私は、100％の高さと垂直方向のセンターアライメントを固定する必要があるdivを作っています。 Bootstrap 4でやる必要があります。パディングを追加する以外はすべてを管理しました。子divにパディングを追加するたびに、コンテンツはオフスクリーンになります。私も試しました

overflow-y: scroll 

それはそれを修正することを望んでいるが、何も起こりません。

コードを分割したため、ここに表示されているすべてが表示されないため、a codepen linkです。

誰かが自分のコードを見て、私が間違ったことを教えてもらえますか？

.card { 
 
    color: #fff; 
 
    background: tomato; 
 
    position: fixed; 
 
    min-height: 100%; 
 
    /* height: 100%; */ 
 
    width: 340px; 
 
    right: 0; 
 
    top: 0; 
 
    overflow: scroll; 
 
} 
 

 
.card-block { 
 
    padding: 100px; 
 
    margin: auto; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /> 
 
<div class="card rounded-0 d-flex justify-content-center"> 
 

 
    <div class="card-block align-self-center"> 
 
    <h1>This is a title</h1> 
 
    <h5>This is a subtitle</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in laoreet neque. Praesent tincidunt justo a magna tempor vulputate. Phasellus euismod feugiat sem. Nam tempus nec nisl id viverra. Cras blandit erat mauris. Cras non commodo quam. Mauris 
 
     auctor ligula vitae erat mollis, quis convallis diam consequat. Nullam ac magna vitae lorem elementum vehicula nec rhoncus nisl. Nullam dignissim at nunc a congue. Sed fringilla pulvinar consequat. Curabitur interdum, nunc in finibus auctor, tortor 
 
     libero facilisis felis, id maximus nibh ex eu nunc. Nunc in molestie lorem, bibendum maximus ipsum. Vestibulum ac finibus risus.</p> 
 
    <a href="#" class="btn btn-secondary">This is a button</a> 
 
    </div> 
 
</div>

Answer 1

ただ、あなただけのcard-blockなくcard

.card-block { 
    padding: 0px 40px; 
    margin: auto; 
    color: #fff; 
    background: tomato; 
    position: fixed; 
    width: 340px; 
    top: 0; 
    bottom:0; 
    right: 0; 
    overflow-y: scroll; 
} 

にプロパティを追加する必要が bottom:0

card-blockあなたのクラスに

を追加

padding、marginおよびwidthを自由に変更してください。彼らはまだスクロールをそのままにしているので。

チェックこのCODEPEN