如何使div与父级相同（显示为表格单元格）

I got a container div containing three child divs (vary in content) - each as tall as the tallest one. I managed this by setting the container to display:table and the child divs to display:table-cell etc.

我有一个容器div包含三个子div（内容不同） - 每个div都和最高的一样高。我通过将容器设置为display：table和子div来显示：table-cell等来管理它。

Everything worked just fine, until...

一切都很好，直到......

I inserted a new div inside one of the child divs and tried to make it height:100% - so it would stretch to the same height as its parents, but that did not work.

我在其中一个子div中插入了一个新的div并尝试使其高度：100％ - 所以它会伸展到与其父级相同的高度，但这不起作用。

Please see my JSFiddle: http://jsfiddle.net/bkG5A/

请看我的JSFiddle：http：//jsfiddle.net/bkG5A/

Any help would be greatly appreciated!

任何帮助将不胜感激！

HTML

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

CSS

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

4 个解决方案

#1

Another option is to set your child div to display: inline-block;

另一个选项是将您的子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>

JSFiddle Demo

JSFiddle演示

#2

You have to set the height for the parents (container and child) explicitly, here is another work-around (if you don't want to set that height explicitly):

您必须明确设置父项（容器和子项）的高度，这是另一种解决方法（如果您不想显式设置该高度）：

.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

You can use this CSS:

你可以使用这个CSS：

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

JSFiddle

的jsfiddle

#4

The child can only take a height if the parent has one already set. See this exaple : Vertical Scrolling 100% height

如果父母已经设置了一个，孩子只能占用一个高度。看到这个例子：垂直滚动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>

#1