时间戳

首页 > 解决方案 > 基于最小高度 div 的 CSS div 等高

css - 基于最小高度 div 的 CSS div 等高

问题描述

我有这个问题，我想在不固定身高的情况下解决。我正在使用 Bootstrap 4 作为按钮。

我的 HTML 结构如下：1 个 div 包含 2 个 div（Left和Right），Left包含一个短文本，Right包含 5 个按钮（或更多）在 flex 显示中。Right按列显示按钮（因为我想要它），但它不包装内容，它增加了Left和Right的高度以将所有按钮放在一列中。

我想要的是将全局高度固定在Left的高度，而Right应该通过将我的按钮放在 2 列中来适应这个高度。我唯一的解决方案是手动修复 div 的高度，这是可行的，但我确信有更好的方法可以做到这一点。

这是简化的代码 HTML 和 CSS，我也有 codepen（如果你想在最后看到我想要的，我评论了我的身高）：https ://codepen.io/julianlecalvez/pen/dwEoax 

.gray-inner-block {
  margin-top: 40px;
  background-color: #f2f2f2;
  padding: 40px;
}

#mybuttons {
  display: flex;
}

#mybuttons .inner-block {
  width: 50%;
}

#mybuttons .right-block {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* 	height: 150px; */
}

#mybuttons .right-block div {
  width: 150px;
  height: 40px;
  margin-bottom: 10px;
  flex-basis: 0;
}

.inner-block .maintitle {
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.inner-block .subtitle {
  font-size: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="mybuttons" class="gray-inner-block buttons buttonsout">
  <div class="inner-block left-block">
    <div class="maintitle">Use these buttons to maipulate the interface</div>
    <div class="subtitle">Each button can be use independently</div>
  </div>
  <div class="inner-block right-block">
    <div>
      <a class="btn btn-primary" role="button">Bouton 1</a>
    </div>
    <div>
      <a class="btn btn-primary" role="button">Bouton 2</a>
    </div>

    <div>
      <a class="btn btn-primary" role="button">Bouton 3</a>
    </div>

    <div>
      <a class="btn btn-primary" role="button">Bouton 4</a>
    </div>
    <div>
      <a class="btn btn-primary" role="button">Bouton 5</a>
    </div>
  </div>
</div>

标签： cssflexboxequal-heights

解决方案

根据您希望如何完成布局的描述，我会假设以下内容：

  • 的高度#mybuttons仅由左栏中文本内容的高度决定
  • 右列中的内容不应指定其父列的高度，而仅在必要时允许其内容换行到子列中

如果这是所需的布局，您可以简单地将右列中的所有内容包装在另一个<div>绝对定位的位置以占用分配给右列的所有区域。这具有将其所有内容从流中取出的效果，这意味着它们不再对#mybuttons.

它看起来像这样：

<div id="mybuttons" class="gray-inner-block buttons buttonsout">
  <div class="inner-block left-block">
    <!-- Left block content here -->
  </div>
  <div class="inner-block right-block">
    <!-- The div below is to be absolutely positioned relative to its parent -->
    <div class="right-block-content">
      <!-- Right block content here -->
    </div>
  </div>
</div>

考虑到这一点，您可以将最初应用于的所有 flexbox 样式移动.right-block到.right-block-content，它应该可以工作：

.gray-inner-block {
  margin-top: 40px;
  background-color: #f2f2f2;
  padding: 40px;
}

#mybuttons {
  display: flex;
}

#mybuttons .inner-block {
  width: 50%;
}

#mybuttons .right-block {
  position: relative;
}

#mybuttons .right-block-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#mybuttons .right-block-content div {
  width: 150px;
  height: 40px;
  margin-bottom: 10px;
  flex-basis: 0;
}

.inner-block .maintitle {
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.inner-block .subtitle {
  font-size: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="mybuttons" class="gray-inner-block buttons buttonsout">
  <div class="inner-block left-block">
    <div class="maintitle">Use these buttons to maipulate the interface</div>
    <div class="subtitle">Each button can be use independently</div>
  </div>
  <div class="inner-block right-block">
    <div class="right-block-content">
      <div>
        <a class="btn btn-primary" role="button">Bouton 1</a>
      </div>
      <div>
        <a class="btn btn-primary" role="button">Bouton 2</a>
      </div>

      <div>
        <a class="btn btn-primary" role="button">Bouton 3</a>
      </div>

      <div>
        <a class="btn btn-primary" role="button">Bouton 4</a>
      </div>
      <div>
        <a class="btn btn-primary" role="button">Bouton 5</a>
      </div>
    </div>
  </div>
</div>

推荐阅读