确保同一包装中的两个div具有相同的高度

Question

左（navi）div可能总是得到100％的右（内容）div？

如果我从.wrapper类改变高度，.navi div跟随它们，但我需要百分之百。

我只能使用display: table-cell;和display: table-row;

的解决方案

演示：http://jsfiddle.net/93a3dock/

Answer 1

这可以通过使用名为flex的功能（浏览器支持here）来实现

＆＃13;

＆＃13;

.wrapper {
  width: 300px;
  display: flex;
}
.navi {
  background: green;
  float: left;
  width: 100px;
}
.content {
  background: yellow;
  float: left;
  width: 200px;
}

＆＃13;

<div class="wrapper">
  <div class="navi">
    <ul>
      <li><a href="#">Link</a>
      </li>
    </ul>
  </div>
  <div class="content">
    <!-- DYNAMIC CONTENT e.g. JOOMLA BLOG -->
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;