1

I have the following markup:

<div id="app-container" class="row h-100 main-content">
  <div class="col-md-4 order-mb-1 sidebar">
    <ul class="mb-3 sidebar-list">
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <main role="main" class="col-md order-md-2 h-100 pl-4 pr-4 pt-3 pb-2">
    <div class="row align-items-center">
      <div class="col">
        <h1>Page Title </h1>
      </div>
    </div>
    <hr>
    <div id="text">Sometimes large amounts of text</div>    
  </main>
</div>

This is the CSS that I have:

html, body {
    height: 100%;
}

.sidebar {
    border-right: 1px solid #ccc;
    padding-right: 0;
    padding-left: 0;
  max-width: 375px;
}

My issue is that if #text has content that spans more than the current viewport the height of the .main-content doesn't go to 100% height, but instead sticks to whatever the viewport height is. Also note that I would like it to be 100% even if the content is short (so it should be always a 100%).

I hope that makes sense.

Here is an example that I've setup to illustrate the problem (scroll down past the viewport to see it).

https://codepen.io/anon/pen/ZMZYQY?editors=1100#0

Any help would be much appreciated.

Dimitar Dimitrov
  • 14,868
  • 8
  • 51
  • 79
  • Take a look at `min-height` ... you'll need either that or, preferable, take advantage of Bootstrap's Flexbox features: https://getbootstrap.com/docs/4.0/utilities/flex/ – Asons Sep 22 '18 at 09:07
  • @LGSon Honestly, it's a bit funny how the memes around SO about marking questions as duplicate are too real. I have seen this question (and bunch more), and I have tried it, but I couldn't make it work, that's why I posted a question here. Jeez, thanks for nothing. – Dimitar Dimitrov Sep 22 '18 at 09:19
  • The dupe's accepted answer explains very well how-to, and if you don't understand how to apply it doesn't make it less a dupe. Instead of being sarcastic, you might wan't to focus on getting help. If you don't understand that setting `height: 100%` on an element constrain it to be just that, you might want to read up on it before using it. It still overflow though, but also giving the container `overflow: hidden` might clear things for you. As a start, remove both the `h-100`. Bootstrap 4 use Flexbox and it work different than the old `float`, which Bootstrap 3 use. – Asons Sep 22 '18 at 11:22
  • Furthermore, if you tried to apply a solution, as you said you did, at least use that solution when asking, so we can see that you tried something. With that you most likely would have got a completely different answer. – Asons Sep 22 '18 at 11:25
  • @LGSon “you might want to focus on getting help...”? Great can you point me to a place where I can ask a question and get help perhaps? Again, people like you with their snarky comments make this place horrible. You could’ve explained and provided an answer instead of pointing me to useless links (or at the very least you could’ve let someone else answer instead of marking it a dupe). I’m still trying to make it work - I’ve read it all. Next time I’ll know not to post here ... there is no point. Again thanks for nothing. – Dimitar Dimitrov Sep 22 '18 at 11:28
  • Note, you started out being snarky saying "_Jeez, thanks for nothing._" ... next time, no matter where, you might want to be a little more humble. I also gave you a hint in my comment how-to, but instead you keep being snarky and focus on me and how bad I am. – Asons Sep 22 '18 at 11:33
  • @LGSon this is not being snarky - This is a reaction to the prevailing aggressive behavior on this (now) toxic site. You literally did nothing. In fact you did the opposite. Don’t worry there won’t be any next time. Have a nice day, and I hope that instead of going on a dupe bonanza, you actually answer questions and help people! Cheers. – Dimitar Dimitrov Sep 22 '18 at 11:40
  • Well, I did (and do) help people, 2700 times and then some...and they all were grateful, so I feel quite good about that, and sorry you choose to focus on everything else than your question. – Asons Sep 22 '18 at 11:44
  • @LGSon good for you, buddy! Keep up the good work, today you did great! – Dimitar Dimitrov Sep 22 '18 at 11:46

0 Answers0