向左和向右浮动使2列为相同高度

Question

为什么右侧浮动柱的高度100％不能达到100％高度？现在我很困惑100％身高的真正含义。

https://jsfiddle.net/7ybLa9fj/

如果我使用浮动，如何让2列具有相同的高度？

.wrap {
  height: 100%;
  overflow: hidden;
  width: 400px;
}

.left {
  float: left;
  width: 50%;
  background: #fafafa;
  text-align: center;
}

.right {
  float: right;
  background: #ccc;
  width: 50%;
  text-align: center;
  height: 100%; //make right has the same with left doesn't work
}

<div class="wrap">
  <div class="left">
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>

  </div>
  <div class="right">right content is not</div>
</div>

Answer 1

当使用百分比作为高度时，上升者也需要一个高度，一直到html，除非一个具有固定的高度，即视口单位vh，如示例2所示

示例1，height: 100%

上有html, body

html,
body {
  height: 100%;
}

.wrap {
  height: 100%;
  overflow: hidden;
  width: 400px;
}

.left {
  float: left;
  width: 50%;
  background: #fafafa;
  text-align: center;
}

.right {
  float: right;
  background: white;
  width: 50%;
  text-align: center;
  height: 100%;
}

<div class="wrap">
  <div class="left">
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>

  </div>
  <div class="right">right content is not</div>
</div>

示例2，height: 100vh

上有wrap

.wrap {
  height: 100vh;
  overflow: hidden;
  width: 400px;
}

.left {
  float: left;
  width: 50%;
  background: #fafafa;
  text-align: center;
}

.right {
  float: right;
  background: white;
  width: 50%;
  text-align: center;
  height: 100%;
}

<div class="wrap">
  <div class="left">
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>

  </div>
  <div class="right">right content is not</div>
</div>

更新

此外，更现代的方法是使用Flexbox而不是float，更灵敏，更优雅的编码。

.wrap {
  display: flex;
  overflow: hidden;
  width: 400px;
}

.left, .right {
  flex-basis: 50%;
  text-align: center;
  border: 1px dotted gray;
}

<div class="wrap">
  <div class="left">
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>

  </div>
  <div class="right">right content is not</div>
</div>

Answer 2

Height 100% will take the height as 100% to its parent element if the element inside the div need that much height.

In Your case right div have only one element which dont need this much big height to render.

IN case you want both left and right container to be of same height kindly provide height in px like below

.left{
height:200px
}
.right{
height:200px
}

Answer 3

你不能将100％添加到相同的高度，因为元素具有floa权限之前没有像子元素那样的元素。并且100％是平均值，高度为100％身高的孩子。因此，您必须将375px的高度设置为相同的高度。

.right {
height:375px;
}

请参阅Js小提琴：https://jsfiddle.net/7ybLa9fj/1/