CSS 浮点数:2 个分区，1 个分区 = 导航，1 个分区 = 产品.全高导航如何做到这一点

Question

我想使用float设置以下内容。一切都很好，除了导航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;正在工作，但这不是动态的，如果我的页面有更多内容，那么它已经失败了。

Answer 1

做这样的事情：

.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;附带的警告。

Answer 2

height:100%只有在您的html和body也height:100%时才有效;

这是代码笔的一个例子