CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexboxbootstrap-4
Retros
Retros

Reputation: 3621

Padding on Bootstrap 4 flex container with 100% height

I'm making a div that needs to be fixed, 100% height and vertically center aligned. And it has to be done with Bootstrap 4. I've managed all of that, except adding padding. Whenever I add padding to the child div, the content goes offscreen. I've even tried

overflow-y: scroll

hoping it'll fix it, but nothing happens.

Because the code snipped is not showing everything as it should on here, here's a codepen link.

Can someone please take a look at my code and let me know what I did 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>

Upvotes: 3

Views: 2507

Answers (1)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7309

Just add bottom:0 to your class card-block

You need to add the properties just to card-block and not 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;
}

Feel free to change padding,margin and width. As they will still keep the scrolling intact.

Check this CODEPEN

Upvotes: 2

Related Questions