3

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Retros
  • 3,511
  • 10
  • 40
  • 60
  • you want that div to be scrollable, right? – Dhaval Jardosh Dec 10 '17 at 18:52
  • Yes, div should be scrollable. – Retros Dec 10 '17 at 18:52
  • Have you tried, `position:absolute`? – Dhaval Jardosh Dec 10 '17 at 18:53
  • Why set a `min-height` to the container if you want content to scroll? With `min-height` the container will expand to accommodate content, preventing an overflow condition, which will eliminate any need for vertical scroll. A fixed height will work with the `overflow` property. https://codepen.io/anon/pen/WdeNjM?editors=1100 – Michael Benjamin Dec 10 '17 at 18:57
  • Okay, but when I remove min-height: 100%. And set it to height: 100%, with an added padding (either on parent or child), the top still gets cut off? – Retros Dec 10 '17 at 19:04
  • have you tried or made a reset on box-sizing ? – G-Cyrillus Dec 10 '17 at 19:06
  • Then, the reason for the content disappearing at the top of the viewport, without the ability to access via scroll, is explained in this post: https://stackoverflow.com/q/33454533/3597276 – Michael Benjamin Dec 10 '17 at 19:10
  • 1
    @Michael_B Thanks Michael for that question link! It helped me a lot to understand what went wrong. I ended up using flexbox auto margins and could even add padding to it. This solved my problem! Again, thanks! I really appreciate it! This isn't the first time you saved my ass either. Lol! – Retros Dec 10 '17 at 19:35

1 Answers1

2

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

Dhaval Jardosh
  • 7,151
  • 5
  • 27
  • 69