So machen Sie div auf dieselbe Höhe wie das übergeordnete Element (als Tabellenzelle angezeigt)

Question 1

Ich habe ein Container-Div mit drei untergeordneten Divs (mit unterschiedlichem Inhalt) – jedes so groß wie das größte. Ich habe dies geschafft, indem ich den Container auf display:table und die untergeordneten divs auf display:table-cell usw. gesetzt habe.

Alles funktionierte einwandfrei, bis…

Ich habe ein neues div in eines der untergeordneten divs eingefügt und versucht, es auf height:100% zu bringen – es würde sich also auf die gleiche Höhe wie seine Eltern dehnen, aber das hat nicht funktioniert.

Bitte sehen Sie sich meine JSFiddle an: http://jsfiddle.net/bkG5A/

Jede Hilfe wäre sehr willkommen!

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;
}

Question 2

Eine andere Möglichkeit besteht darin, Ihr Kind auf div zu setzen 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>

JSFiddle-Demo

Question 3

Sie müssen die einstellen height für die Eltern (Container und Kind) explizit, hier ist eine weitere Problemumgehung (wenn Sie diese Höhe nicht explizit festlegen möchten):

.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;
}

Geige

Question 4

Sie können dieses CSS verwenden:

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

JSFiddle

Question 5

Das Kind kann nur dann eine Größe nehmen, wenn die Eltern bereits eine eingestellt haben. Siehe dieses Beispiel: Vertikales Scrollen 100 % Höhe

 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>