如何在不导致页面滚动的情况下使元素成为最大高度？答案

【问题标题】：How do I make an element be the maximum height it can be without causing the page to scroll?如何在不导致页面滚动的情况下使元素成为最大高度？
【发布时间】：2019-12-14 12:36:30
【问题描述】：

我有一个对话框：

$(document).ready(function() {
  $('.ui.modal').modal('show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.6/dist/semantic.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.6/dist/semantic.min.js"></script>


<div class="ui overlay fullscreen modal">
  <div class="header">
    Dialog box
  </div>
  <div class="content">
    <div class="ui warning message">
      <div class="header">
        Be careful
      </div>
      This is a warning message
    </div>
    <div style="background-color: blueviolet">This is the container.<br />This is the container.</div>
  </div>
  <div class="actions">
    <div class="ui approve button">Save</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

我希望紫色 div（显示“这是容器”的那个）在不使页面滚动的情况下具有尽可能高的高度，如下所示：

我尝试过使用height:100%，但它什么也没做。如何在不使用高度的像素值的情况下获得图片中的结果？

【问题讨论】：

标签： css flexbox height

【解决方案1】：

使容器 (.content) 成为列方向的弹性容器。

在紫色框中添加flex: 1。

将此添加到您的 CSS：

.ui.modal > .content {
    display: flex;
    flex-direction: column;
}

.ui.modal > .content > div:last-child {
    flex: 1;
}

$(document).ready(function() {
  $('.ui.modal').modal('show');
});

.ui.modal > .content {
    display: flex !important;
    flex-direction: column;
}

.ui.modal > .content > div:last-child {
    flex: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.6/dist/semantic.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.6/dist/semantic.min.js"></script>


<div class="ui overlay fullscreen modal">
  <div class="header">
    Dialog box
  </div>
  <div class="content">
    <div class="ui warning message">
      <div class="header">
        Be careful
      </div>
      This is a warning message
    </div>
    <div style="background-color: blueviolet">This is the container.<br />This is the container.</div>
  </div>
  <div class="actions">
    <div class="ui approve button">Save</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

【讨论】：