Vertical align DIV to bottom of Bootstrap Jumbotron fails in IE9 using flex

Question

I have a DIV inside a regular Bootstrap Jumbotron...

<div class="jumbotron vertical-align">
   <div class="container">
      Content here
   </div>
</div>

which I am aligning to the bottom using this...

.vertical-align
{
  display:0;
  display:flex;
  -webkit-align-items:flex-end;
  align-items:flex-end;
}

This works great everywhere but fails in IE9 where the DIV is aligned to the top. I understand Flex does not work in IE9 but need another quick solution.

Any way I can do this a different way to get it working cross browser?

Answer 1

You can use CSS tables:

.vertical-align {
  display: table;
  height: 100px;
  border: 1px solid;
}
.container {
  display: table-cell;
  vertical-align: bottom;
}

<div class="jumbotron vertical-align">
  <div class="container">
    Content here
  </div>
</div>

Answer 2

Look at my answer to this question which I just posted a few minutes ago. Flex doesn't work on IE 9.

How can I align 2 or more "row" divs to the bottom of a div, without using any kind of "absolute" positioning? Needs IE9+ support

Edit: Link content in case link changes.

If you can use jQuery, then this solution works. Here is a fiddle: https://jsfiddle.net/o47xeze7/3/

HTML

<div class="parent">
    <div class="bottom">
        <div class="child">abcdfg</div>
        <div class="child">abcdfg</div>
    </div>
</div>

CSS

.parent {
    width: 100%;
    height: 20rem;
    border: 1px solid black;
    display: block;
}

.child {
    border: 1px solid red;
    display: block;
}

.bottom {
    display: block;
    position: relative;
}

jQuery

$(function() {
    var parentHeight = $(".parent").height();
    var bottomHeight = $(".bottom").height();
    var difference = parentHeight - bottomHeight;

    $(".bottom").css("margin-top", difference);
});