Container div will not take reach bottom of the page

Question

I know there are questions like this quite often and I have tried everything I could find. I have a div that is placed to the left of another div. The div in question is called light-gray. The div on the right is called white-green. The white-green div is touching the bottom of the page based on more content than light-gray and having the height set to auto. Which that is fine, but I want the light-gray div to go all the way to the bottom of the page. I have tried bottom: 0;, margin-bottom: 0px;, height: 100%;. Nothing I am doing is working. The code for the gray container is this:

.light-gray {
    background-color: #E0E0E0;
    width: 33.5%;
    padding-top: 150px;
    bottom: 0;
    margin-bottom: 0;
}
.light-gray-container {
    left: 15%;
    position: relative;
    width: 80%;
    height: auto;
    padding-bottom: 40px;
}

<div class="light-gray">
    <div class="light-gray-container">
    </div>
</div>

To see this live, you can click here

The div is the last section on the left. You will notice white space under it.

Any ideas on what to do?

Actually, in my browser, there is white space showing under the white-green div. — kojow7, Feb 24 '16 at 04:44
No white space in firefox. In chrome shows white space under the right side div of light green. — ketan, Feb 24 '16 at 04:45
Well how can I get the gray div to always touch the bottom of the page? I'm sure it will be a bit different in browsers. — Paul, Feb 24 '16 at 04:45
@ketan the space for the green div is just margin I have under the button — Paul, Feb 24 '16 at 04:45
What would the best solution be then? I get the image I added in Chrome and IE. By the way I forgot how horrible IE is. I haven't been on my site on it in some time. wow. — Paul, Feb 24 '16 at 04:48
I think you should place the left two divs inside a single parent div. — kojow7, Feb 24 '16 at 04:59
Once you do that, this may help: http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height — kojow7, Feb 24 '16 at 05:04
I don't want them to be the same height though. The right div (`white-green`) will always have much more height. I just want them both to touch the bottom of the screen. — Paul, Feb 24 '16 at 05:06
You mean touch the bottom of the screen when not scrolled? I don't understand how you want them to both touch the bottom but not be the same height??? — kojow7, Feb 24 '16 at 05:07
No, when scrolled down to the section. At the very end of the screen (when scrolled), I want both `light-gray` and `white-green` to touch the bottom of the page. I want the divs to extend to meet the bottom, if needed. — Paul, Feb 24 '16 at 05:09
So, if that is the case, then both the left column and right column are the exact same height. — kojow7, Feb 24 '16 at 05:09
How though? Wouldn't that push the gray div up more? If you scroll to the very bottom you will see that the gray div starts about 1/4 down the page. — Paul, Feb 24 '16 at 05:10
Because `white-green` is absolutely positioned, it is removed from the document flow. This means that `light-gray` has no relation to `white-green`. It doesn't even know it exists. So matching their heights with pure CSS is a difficult task. I would place both sections in the same container as non-positioned siblings, so they can share equal height. — Michael Benjamin, Feb 25 '16 at 04:23

kojow7 · Answer 1 · 2016-02-25T15:25:58.787

The below example solves the issue. Basically, you put both the left divs inside a single parent div. You then place both parent divs inside another main div and set a the main div to display its contents as a flexbox (display: flex). By default a flexbox operates with the elements as if they are row. In this case you would have two divs in your row (the left column and the right column).

You then have two choices with the remaining two divs:

You can simply set the background color of the parent container to be the same color as the grey one. See the first Example 1 below.
Alternately, you can also set the display of the left div to also display as a flexbox (display: flex). However, because you now have two items stacked on top of each other you need to set flex-direction: column. Finally, as the second div may not fill up all of the remaining space you can set its flex-grow property. This will cause it to fill the remainder of the space. See Example 2 below.

Example 1 - Flexbox on outer div, background colour on left inner div.

.row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.col {
  border: solid;
}
.col:first-child {
  width: 25%;
  background-color: lightgrey;
}
.col:nth-child(2) {
  width: 75%;
  padding: 1em;
}
.inner {
  padding: 1em;
}
.inner:first-child {
  background-color: lightgreen;
}
.inner:nth-child(2) {
  background-color: lightgrey;
}

<div class="row">
  <div class="col">
    <div class="inner">Inner 1</div>
    <div class="inner">Inner 2</div>
  </div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Example 2 - Row flexbox on outer div, column flexbox on left inner div, flex-grow is used to expand the last div in the left column

.row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.col {
  border: solid;
}
.col:first-child {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  width: 25%;
}
.col:nth-child(2) {
  width: 75%;
  padding: 1em;
}
.inner {
 padding: 1em; 
}
.inner:first-child {
  background-color: lightgreen;
}
.inner:last-child {
  background-color: lightgrey;
  flex-grow: 1;
}

<div class="row">
  <div class="col">
    <div class="inner">Inner 1</div>
    <div class="inner">Inner 2</div>
  </div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Container div will not take reach bottom of the page

1 Answers1