时间戳

首页 > 解决方案 > 如何给弹性项目100％的高度？

html - 如何给弹性项目100％的高度？

问题描述

我有以下标记。该类footer-info有一些样式，无论存在多少文本，我都希望每列内的高度相同。

我不想在可能的情况下将样式应用于列类，并且如果可能的话，我也希望避免相对/绝对位置。有没有优雅的解决方案？

我想要的结果是每个footer-info都填充父行的高度（等高列）。

我把它放在一个 jsfiddle 中：https ://jsfiddle.net/ntxc305e/

.container-fluid {
  padding-right: 2rem;
  padding-left: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.row {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.col-md {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%;
}

.footer-info {
  background-color: rgba(36, 36, 36, 0.8);
  color: #f7f7ef;
  padding: 20px;
}
<div class="container-fluid">
  <div class="row">
    <div class="col-md">
      <div class="footer-info">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sunt, vero, minima perspiciatis sit autem natus aspernatur labore pariatur dicta aut iure eum doloremque suscipit dolorum, temporibus reiciendis. Veniam, nostrum.
        </p>
      </div>
    </div>
    <div class="col-md">
      <div class="footer-info">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum recusandae qui accusamus similique explicabo mollitia quas, unde deserunt aperiam ipsam non distinctio totam officiis incidunt enim soluta odio saepe. Ullam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus suscipit voluptas nobis ad sit beatae, quaerat, harum reiciendis autem rerum est molestiae. Quisquam optio rerum consequuntur doloribus corporis suscipit aliquid!</p>
      </div>
    </div>
    <div class="col-md">
      <div class="footer-info">
        <p>Small column</p>
      </div>
    </div>
  </div>
</div>

标签： htmlcssflexbox

解决方案

使用您发布的 jsfiddle 示例，解决方案实际上非常简单！在row你的例子中是一个弹性容器，col-md元素是他的弹性项目。弹性项目的重要之处在于，它们填充了容器的高度，这意味着您的所有col-md项目都垂直填充了容器，row因此它们的高度已经相同。同时您的footer-info元素始终是元素的直接子col-md元素，这意味着您唯一需要做的就是将 的高度设置footer-info为 100% 以填充其父元素 ( col-md) 的高度。我在这里为您创建了一个简化的示例：

.row {
  display: flex;
  justify-content: space-around;
}

.col-md {
  flex-basis: 30%;
}

.footer-info {
  box-sizing: border-box;
  background-color: rgba(36, 36, 36, 0.8);
  color: #f7f7ef;
  padding: 20px;
  height: 100%;
}
<div class="row">
  <div class="col-md">
    <div class="footer-info">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sunt, vero, minima perspiciatis sit autem natus aspernatur labore pariatur dicta aut iure eum doloremque suscipit dolorum, temporibus reiciendis. Veniam, nostrum.
      </p>
    </div>
  </div>
  <div class="col-md">
    <div class="footer-info">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum recusandae qui accusamus similique
      </p>
    </div>
  </div>
  <div class="col-md">
    <div class="footer-info">
      <p>Small column</p>
    </div>
  </div>
</div>

推荐阅读