Question

包装div内有两个不同高度的浮动div。我需要它们两者都是身体高度的100％，即相同的高度。还使用了clearfix。但height:100%似乎没有用。怎么做？

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/

Answer 2

如果您想使用vh单位（在您的代码中看到），它确实更容易，无需担心'遗产'并且看到您的列在窗口的100％高度停止。

如果你混合了faux-column和clear fix的方法，你只需要设置一次min-height：100vh;在浮动元素上。

您的黄色背景必须在包装中绘制，而非浮动元素中的红色背景则使用clearfix方法进行拉伸。

body {
  margin: 0;
}
.wrapper{
  background-color: yellow;
  overflow:hidden;
}
.primary{
  float: left;
  width: 80%;  
  min-height:100vh;
}
.wrapper .primary img{
  height: 100px;
  /* width:1000px; */
  width: 100px;
}

.secondary .overflow{
  margin-left:80%;
  background-color: red;
}
.overflow:after {
  content:'';
  height:0;
  display:block;
  clear:both;
}
.secondary img{
  height: 500px;
  /*height:100px;*/
  width: 100px;
}

取消注释图片的高度值，以检查页面的行为和绘图，是否滚动。 http://codepen.io/anon/pen/chHtK

希望这有助于您理解vh（或vw）单元的使用，对于faux-column和clearfix方法，它只是提醒旧方法：）

享受

Answer 3

html元素也需要100％ - 试试这个：

html { height: 100%; }
body {
    height: 100%;
    background-color: green;
    margin: 0;
}

如何将两个浮动div设置为页面的100％高度

3 个答案: