Match div's height to full scrollbar height

Question

My page has 3 main divs: top menu (static height), main content (variable height based on length of content), and a side menu

I want the side menu's height to match that of the main content's height. The main content is min-height 100vh - topmenu's height, but most of the time it's much taller. My problem is that the side menu's content if often much shorter. The background color and borders only extend down to hit that content. If I try to do height 100% it stays the same, and I can't fix it to a static height since the main content's height is variable.

How can I match my side menu's height to the main content's height. Or, make the side menu's height 100% of the scrollable viewport.

I've tried using bootstrap's grid system to set things up but haven't been able to get it working yet.

<div>
    <div class="container-fluid top-menu">...</div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 side-menu-view">...</div>
        <div class="col-md-20 main-content-view">...</div>
    </div>
</div>

CSS

.top-menu {
  height: 47px;
}

.side-menu-view {
  background-color: $background-light;
  border-right: solid 1px $border-light;      
  height: 100%;
}

.main-content-view {
  border-left: solid 1px $border-dark;
  height: 100%;
}

Update Including jsfiddle https://jsfiddle.net/joshuaohana/DTcHh/12031/ Be sure to expand preview to full width so you can see. The issue is I want the red background to reach down full height of the main content on the right

can you share a jsfiddle or snippet – Sachin Kanungo Sep 12 '15 at 19:22 — Sachin Kanungo, Sep 12 '15 at 19:22

score 1 · Answer 1 · answered Sep 12 '15 at 20:16

1

Problem Solved

Check this one

    .flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: stretch;
    }

.flex-item:nth-child(1) {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    }

.flex-item:nth-child(2) {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    }

answered Sep 12 '15 at 20:16

Sachin Kanungo

1,054
9
17

hmm I see it working in your example but can't quite make it work with mine :-\ The main content is overflowing onto the side bar. I'll try to mux with it since apparently your approach is solid. Thanks – Joshua Ohana Sep 12 '15 at 20:44
display flex is given to parent container to control childrens. Do not try to give flex on childs unless they become parent. – Sachin Kanungo Sep 12 '15 at 20:50
Tried using the exact same scheme you supplied, as soon as I remove the bootstrap column classes from the two children it all breaks – Joshua Ohana Sep 12 '15 at 20:52

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

Using flexbox, calc, min-height, (unfortunately) !important, and a media query, I cracked the solution I believe you are looking for:

.top-menu {
  height: 47px;
  background-color: blue;
}
.side-menu-view {
  background-color: red;
  border-right: solid 1px black;
}
.main-content-view {
  min-height: calc(100vh - 47px)!important;
}
@media(min-width: 992px) {
  .row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  .col {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>




<div>
  <div class="container-fluid top-menu">top menu</div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 side-menu-view">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
    </div>
    <div class="col-md-10 main-content-view">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
    </div>
  </div>
</div>

edited May 23 '17 at 11:58

Community

1
1

answered Sep 12 '15 at 21:49

jaunt

4,978
4
33
54

Hmm it appears to be working in your snippet but when I use the same details my side menu is only working down to 100vh (eg: the main content contains more than a full page's worth, and when scrolling down I lose the background styling on sidemenu - which makes sense according to your css of min-height: 100vh-47px – Joshua Ohana Sep 13 '15 at 14:05
@JoshuaOhana Perhaps there's some additional styling from somewhere that's messing things up. Try adding `!important` to figure out where it comes from. (Please only use `!important` while debugging it though - it's bad practice to use it in a final product.) Or is it possible for you to link us to a live copy of your complete version? – jaunt Sep 13 '15 at 14:08
I poured through everything and I can't find anything else controlling that section, also tried applying !important to everything to no avail (though there's only a few lines obviously that apply here). I am not comfortable providing login in a public forum, any other way I can provide the necessary information? – Joshua Ohana Sep 13 '15 at 14:33
if it matters I'm using Bootstrap Sass v3.3.5, perhaps that's jacking up with the way rows/cols work... – Joshua Ohana Sep 13 '15 at 14:34
Possibly, I've no idea though: I don't use bootstrap. As for login details, chat and questions both have their history logged publicly. However, if you're comfortable with me helping you, you could comment the login on this answer, and once I have the details you can delete the comment never to be seen again. – jaunt Sep 13 '15 at 15:06
Okay I'm in, I'll let you know if i find anything ;) – jaunt Sep 13 '15 at 15:36
you sir, rock!! Thanks so much for even trying :D – Joshua Ohana Sep 13 '15 at 15:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89516/discussion-between-jaunt-and-joshua-ohana). – jaunt Sep 13 '15 at 16:05
This solution is perfect, the issue I had with it out working was due to an absolutely positioned element in my main content view – Joshua Ohana Sep 13 '15 at 16:18

score 0 · Answer 3 · answered Sep 12 '15 at 19:32

0

Check this Out

.side-menu-view {
  background-color: red;
  border-right: solid 1px black;      

    float:right;
}

.main-content-view,.side-menu-view {
  height: 100vh;
    overflow:hidden;
}

I have tried to make as accurate as possible.

answered Sep 12 '15 at 19:32

Sachin Kanungo

1,054
9
17

I appreciate it but that causes it to be 100vh static, whereas the content itself is dynamic and could get taller than 100vh. In your solution the side menu's maximum height ever would still be 100vh – Joshua Ohana Sep 12 '15 at 19:37
Why don't just use display flex and create two grids. It can be done easily that way. – Sachin Kanungo Sep 12 '15 at 19:55
can you explain how I'd do that? – Joshua Ohana Sep 12 '15 at 19:58

score 0 · Answer 4 · answered Sep 12 '15 at 19:47

0

Have you tried assigning each section an ID and pulling the height from the first box, putting it into a variable and then calling the second box and assigning its height that variable? Use Javascript. I'm thinking:

<div id="first_box"></div>
<div id="second_box"></div>
<script type="text/javascript">
var box1_height;

box1_height = document.getElementById("first_box").style.height;

document.getElementById("second_box").style.height = box1_height;
</script>

answered Sep 12 '15 at 19:47

Chris Hodges

9
3

that'll be a last resort, but I'm sure it would work. The content changes all the time so I'd need to tie it to a directive so on any change it'd readjust the height... undue and undesired overhead ;-\ – Joshua Ohana Sep 12 '15 at 19:58

Match div's height to full scrollbar height

4 Answers4