flexbox 可以在不访问“body”的情况下填满整个屏幕吗？答案

【问题标题】：Can flexbox fill the entire screen without access to the 'body'?flexbox 可以在不访问“body”的情况下填满整个屏幕吗？
【发布时间】：2017-04-19 22:31:15
【问题描述】：

在我的情况下，我无法将 flex 应用于 body 标签。我可以在不将 css 应用于 body 标签的情况下实现相同的效果（粘性页眉/页脚，flexbox 占据全屏）。这是相关的代码。我注释掉了达到我想要的效果的body css。

谢谢，马特

/*html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
*/
.flex-body {
  min-height: 100%;
  display: flex;
  flex-direction:column;
}



.main {
  display: flex;
  flex: 1 0 auto;
}

.nav {
  flex: 0 0 12em;
}

.content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex: 1 0 auto;
  flex-direction: row;
  
}
.col {
  flex: 1 0 auto;
}

/* TEMP CODE FOR THIS TEST, REMOVE FOR ACTUAL USE
*/
body {
  text-align: center;
}

*{
  box-shadow:inset 0px 0px 0px 1px #f00;
}

<div class="flex-body">
<header class="header">
	<section class="content">
	<div class="row">
		<div class="col">
			Upper Left
		</div>
		<div class="col">
			Upper Middle
		</div>
		<div class="col">
			Upper Right
		</div>
	</div>

	</section>
</header>
<main class="main">
	<nav class="nav">
		Nav
	</nav>
	<section class="content">
		<div class="row">
			<div class="col">
				Upper Left
			</div>
			<div class="col">
				Upper Middle
			</div>
			<div class="col">
				Upper Right
			</div>
		</div>
		<div class="row">
			Middle
		</div>
		<div class="row">
			Lower
		</div>
	</section>
</main>
<footer class="footer">Footer</footer>
</div>

【问题讨论】：

Height 和 min-height in percent 仅在父元素具有明确高度时才有效 - 因此，如果您不能指定 body 和 html 的高度，.flex-body { min-height: 100%; } 将不起作用。但你可以试试100vh ...
height:100% 也需要一个具有高度的父级，因此可以计算 % 。这里的身体没有高度。为了工作，您需要：html,body {height:100%} 其中 html 计算窗口浏览器的高度。 .flex-body 可以将此高度用作高度或最小高度。请注意，在这种情况下，IE 的 min-height 存在问题。添加到正文display:flex;flex-direction:column; 这里有很多关于这两个的问题

标签： html css flexbox

【解决方案1】：

您还可以覆盖 flex boxe 并使用 flex 简写来填充整个父级的 height 或 width 。 但这意味着包含 html 和正文。

这样你确实需要处理高度/宽度和边距/填充。浏览器会自己处理。

html {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body,
.flex-body {
  display: flex;
  flex: 1;/* no need anymore to deal with height/width */
  flex-direction: column;
}

.main {
  display: flex;
  flex: 1;
  /* mind this */
  /*overflow:auto; */ /* can come handy here if you want to keep footer in view */
}

.nav {
  flex: 0 0 12em;
}

.content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex: 1 0 auto;
  flex-direction: row;
}

.col {
  flex: 1 0 auto;
}


/* TEMP CODE FOR THIS TEST, REMOVE FOR ACTUAL USE
*/

body {
  text-align: center;
}

* {
  box-shadow: inset 0px 0px 0px 1px #f00;
}

<div class="flex-body">
  <header class="header">
    <section class="content">
      <div class="row">
        <div class="col">
          Upper Left
        </div>
        <div class="col">
          Upper Middle
        </div>
        <div class="col">
          Upper Right
        </div>
      </div>

    </section>
  </header>
  <main class="main">
    <nav class="nav">
      Nav
    </nav>
    <section class="content">
      <div class="row">
        <div class="col">
          Upper Left
        </div>
        <div class="col">
          Upper Middle
        </div>
        <div class="col">
          Upper Right
        </div>
      </div>
      <div class="row">
        Middle
      </div>
      <div class="row">
        Lower
      </div>
    </section>
  </main>
  <footer class="footer">Footer</footer>
</div>

【讨论】：

【解决方案2】：

为弹性容器添加 100vh 的最小高度：

.flex-body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

然后它将至少与浏览器的视口一样高（但如有必要，可以变高）。

【讨论】：