填充可用空间而不会溢出[重复]答案

【问题标题】：Fill available space without overflowing [duplicate]填充可用空间而不会溢出[重复]
【发布时间】：2017-11-15 12:30:42
【问题描述】：

我正在尝试使用 html 创建一个桌面应用程序用户界面，我想要实现的是有一个固定的页眉和页脚，内容填充窗口的剩余（无论）空间。一直在尝试使用 flex，但不太了解它是如何工作的，我几乎所有的试验都以溢出结束。

小提琴 http://jsfiddle.net/4dxperkp/

section {
  display: flex;
  flex-flow: column;
}

header {
  background: tomato;
}

div {
  background: gold;

  height: 100vh;
}

footer {
  background: tomato;
}

我也遇到了-webkit-fill-available，但它最终也导致了溢出。

【问题讨论】：

您希望内容做什么？您在演示中将主容器设置为 height: 300px。
对不起，为什么老小提琴出现在你面前？有一个新的。
根据我对您问题的理解，我发布了一个答案。

标签： html css flexbox

【解决方案1】：

section {
  display: flex;
  flex-flow: column;
  height: 100vh;          /* the container always has full height of the viewport */
}
header {
  background: tomato;
}
div {
  flex: 1;                /* the content div always consumes all free space */
  background: gold;
  overflow: auto;
}
footer {
  margin-top: auto;       /* the footer is always pinned to the bottom */
  background: lightgreen;
  min-height: 60px; 
}

body { margin: 0; }

<section>
  <header>
    header: sized to content
      <br/>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>

【讨论】：

【解决方案2】：

在 min-height 中使用 CSS 的 calc() 函数，使用 javascript（用于动态高度计算），例如：

var heightHeader = $('header').height();
var heightFooter = $('footer').height();
var mainHeight = heightHeader + heightFooter;
var divHeight = 'calc(100vh - ' + mainHeight + 'px)';

$('.main-content').css('min-height', divHeight);

查看更新后的Fiddle。

希望这会有所帮助！

【讨论】：

不错，但我不想依赖硬编码值（96px）。有没有其他办法？
@AhmedTarek 看看更新的答案。这可能会解决您的问题。