Как сделать div той же высотой, что и родительский (отображается как table-cell)

У меня есть контейнер div, содержащий три дочерних div (по-разному) - каждый из них высок, как самый высокий. Мне это удалось, установив контейнер для отображения: table и дочерних divs для отображения: table-cell и т.д.

Все работало нормально, пока...

Я вставил новый div внутри одного из дочерних div и попытался сделать его высотой: 100% - поэтому он будет растягиваться до той же высоты, что и его родители, но это не сработало.

Посмотрите мой JSFiddle: http://jsfiddle.net/bkG5A/

Любая помощь будет принята с благодарностью!

HTML

<div class="container">
    <div class="child">
        a<br />a<br />a
    </div>
    <div class="child">
        a<br />a<br />a<br />a<br />a<br />a<br />a
    </div>
    <div class="child">
        <div class="content">
            a<br />a<br />a
        </div>
    </div>
</div>

CSS

.container {
    display: table;
}
.child {
    width: 30px;
    background-color: red;
    display: table-cell;
    vertical-align: top;
}
.content {
    height: 100%;
    background-color: blue;
}

Ответ 1

Другой вариант - установить дочерний div на display: inline-block;

.content {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: blue;
}

.container {
  display: table;
}
.child {
  width: 30px;
  background-color: red;
  display: table-cell;
  vertical-align: top;
}
.content {
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: blue;
}

<div class="container">
  <div class="child">
    a
    <br />a
    <br />a
  </div>
  <div class="child">
    a
    <br />a
    <br />a
    <br />a
    <br />a
    <br />a
    <br />a
  </div>
  <div class="child">
    <div class="content">
      a
      <br />a
      <br />a
    </div>
  </div>
</div>

Ответ 2

Вы должны установить height для родителей (контейнер и дочерний элемент) явно, вот еще один способ работы (если вы не хотите явно указывать эту высоту):

.child {
  width: 30px;
  background-color: red;
  display: table-cell;
  vertical-align: top;
  position:relative;
}

.content {
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
  background-color: blue;
}

Fiddle

Ответ 3

Вы можете использовать этот CSS:

.content {
    height: 100%;
    display: inline-table;
    background-color: blue;
}

JSFiddle

Ответ 4

Ребенок может принимать только высоту, если родительский объект уже установлен. См. Этот раздел: Вертикальная прокрутка 100% высоты

 html, body {
        height: 100%;
        margin: 0;
    }
    .header{
        height: 10%;
        background-color: #a8d6fe;
    }
    .middle {
        background-color: #eba5a3;
        min-height: 80%;
    }
    .footer {
        height: 10%;
        background-color: #faf2cc;
    }

    $(function() {
      $('a[href*="#nav-"]').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 500);
            return false;
          }
        }
      });
    });

html,
body {
  height: 100%;
  margin: 0;
}
.header {
  height: 100%;
  background-color: #a8d6fe;
}
.middle {
  background-color: #eba5a3;
  min-height: 100%;
}
.footer {
  height: 100%;
  background-color: #faf2cc;
}
nav {
  position: fixed;
  top: 10px;
  left: 0px;
}
nav li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <nav>
    <ul>
      <li>
        <a href="#nav-a">got to a</a>
      </li>
      <li>
        <a href="#nav-b">got to b</a>
      </li>
      <li>
        <a href="#nav-c">got to c</a>
      </li>
    </ul>
  </nav>
  <div class="header" id="nav-a">

  </div>
  <div class="middle" id="nav-b">

  </div>
  <div class="footer" id="nav-c">

  </div>