左右浮动使2列高度相同[重复]

Posted 2023-03-06

【中文标题】左右浮动使2列高度相同[重复]

【英文标题】：float left and right make 2 column to be same height [duplicate]

【发布时间】：2018-01-28 00:32:17

【问题描述】：

为什么右侧浮动列的高度为 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>

【问题讨论】：

Bootstrap 使用浮点数，因此我链接的欺骗中的解决方案将回答这个问题。

@Paulie_D 同意它确实有答案，但仍未解释原因。随意再次关闭它，我会留下它:)

我不认为我现在可以再次关闭，但您也许可以

@Paulie_D 试试...如果没有，我丢失了链接，所以将它作为评论发布，我会

它仍然显示在链接的问题侧边栏中

【参考方案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>

【讨论】：

使用 vh 有什么缺点吗？

@JennyMok 在这种情况下，没有。

@JennyMok 我更新了我的答案并添加了一些重复项以引起对这些答案/问题的更多关注

什么情况下vh有问题？永远不要使用它，但在这种情况下它仍然有效哈哈。

@JennyMok 它没有任何问题，虽然它是基于视口的，但出于同样的原因，它有时可能会有缺点。

【参考方案2】：

您不能将 100% 添加到相同的高度，因为元素具有浮动权利，而不是之前没有子元素。而100%是均值，身高为100%身高的孩子。所以你必须将375px的高度设置为相同的高度。

.right 
height:375px;

在此处查看 Js fiddle：https://jsfiddle.net/7ybLa9fj/1/

【参考方案3】：

如果 div 内的元素需要这么高的高度，Height 100% 会将高度作为其父元素的 100%。

在你的情况下，右 div 只有一个元素，不需要这么大的高度来渲染。

如果您希望左右容器的高度相同，请提供以 px 为单位的高度，如下所示

.left
height:200px

.right
height:200px