css - 如何设置两个 float 的div为页面的100%高度

Question

包装器 div 中有两个不同高度的 float div。我需要它们都是 body 高度的 100%，即相同的高度。还用过clearfix。但是 height:100% 似乎不起作用。如何做到这一点？

Demo

HTML:

        <div class="wrapper">
            <div class="primary">
                <img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
            </div>
            <div class="secondary">
                <img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
            </div>
            <div class="clearfix">

            </div>
        </div>

CSS:

body {
    min-height: 100vh;
    background-color: green;
    margin: 0;
}

.wrapper{
    background-color: blue;
  height: 100%;
}

.primary{
    float: left;
    width: 80%;
    height: 100%;
    background-color: yellow;
}

.primary img{
    height: 100px;
    width: 100px;
}

.secondary{
    float: right;
    width: 20%;
    background-color: red;
  height: 100%;
}

.secondary img{
    height: 500px;
    width: 100px;
}

.clearfix{
    clear: both;
}

Answer 1

您需要做的就是为 html 和 body 标签添加 100% 的高度，如下所示:

html, body {
   height: 100%;
}

演示:

http://jsbin.com/EsOfABAL/1/