CSS Float : 2 Divs, 1 div = Nav, 1 div = product. Full height NAV how to do this?

问题

I want to setup the following using float. Everything worked out fine except the nav div is not full height.

Screenshot : 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;

Just for info : min-height:100%; NOT working.

For example : height:500px; is working but this is not dynamic, if my page has more content then it already fails.

回答1:

Do something like this:

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. */
}

This solution will actually force your left nav to grow with the container, instead of just making it look that way. It's also backwards compatible to most browsers and doesn't have any of the caveats that come with display: table;.

回答2:

height:100% will only work if your html & body are height:100% too ;

Here is Codepen an example

来源：https://stackoverflow.com/questions/27405466/css-float-2-divs-1-div-nav-1-div-product-full-height-nav-how-to-do-this

标签

html

css

css-float