Question

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

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

header {
  background: tomato;
}

div {
  background: gold;

  height: 100vh;
}

footer {
  background: tomato;
}

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

Answer 1

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

Answer 2

在calc()中使用CSS的 min-height 功能，使用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。

希望这有帮助！

填充可用空间而不会溢出

2 个答案: