I need help creating a fixed div with 100% height and vertically centered alignment using Bootstrap 4. I've achieved everything except adding padding. When I try to add padding to the child div, the content overflows off the screen. I even attempted
overflow-y: scroll
in hopes of fixing it, but no luck.
Since the code snippet doesn't display correctly here, you can view it on CodePen.
Could someone please check my code and let me know where I went wrong?
.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>