Question

在我的情况下，我无法对身体标签应用flex。如果不将css应用于body标签，我是否可以达到相同的效果（flexbox占据整个屏幕的粘性页眉/页脚）。这是相关的代码。我评论出了达到我想要效果的身体css。

谢谢，马特

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您还可以叠加柔性盒子并使用柔性短杆来填充整个父母的高度或宽度。 但这意味着包含html＆amp;身体。

这样你需要处理高度/宽度和边距/填充。浏览器将自行处理它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

向Flex容器添加最小高度100vh：

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

然后它至少与浏览器的视口一样高（但如果需要，将允许它变得更高）。

flexbox可以填满整个屏幕而无需访问＆＃39; body？

2 个答案: