html - CSS Float:2个Divs，1个div = Nav，1个div =产品。全高NAV怎么办？

我想使用float设置以下内容。
一切正常，除了nav div不是全高。

截图：http://postimg.org/image/gywuh9lv1/

HTML：

<div class='container'>
<div class='left'>NAV PANEL FULL HEIGHT, ADJUST TO AMOUNTS OF PRODUCTS</div>
 <div class='right'>
  <div class='product'>PRODUCTS</div>
  <div class='product'>PRODUCTS</div>
  <div class='product'>PRODUCTS</div>
  <div class='product'>PRODUCTS</div>
  <div class='product'>PRODUCTS</div>
  <div class='product'>PRODUCTS</div>
  <div class='product'>PRODUCTS</div>
  <div class='product'>PRODUCTS</div>
  <div class='product'>PRODUCTS</div>
 </div>
</div>

CSS：

float: left;

仅供参考：
最低高度：100％；无法运作。

例如：height：500px;正在工作，但这不是动态的，如果我的页面上有更多内容，那么它已经失败了。

最佳答案

做这样的事情：

的CSS

.container {
  position: relative;
}
.right {
  padding-left: 220px; /* Your left-nav width + padding here */
}
.left {
  position: absolute;
  top: 0; /* Or a px value if there's supposed to be a margin between this and the container. */
  bottom: 0; /* Same as above */
  width: 200px; /* Or however big you want to make it. */
}

该解决方案实际上将迫使您的左侧导航器随容器一起增长，而不是仅仅使其看起来那样。它也向后兼容大多数浏览器，并且没有display: table;附带的任何警告。

关于html - CSS Float:2个Divs，1个div = Nav，1个div =产品。全高NAV怎么办？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27405466/