Question

我有一个这样的页面：

* {
  padding: 0;
  margin: 0;
}

.pageWrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: saddlebrown;
  height: 40px;
}

.main {
  flex: 1;
  position: relative;
}

.innerWrapper {
  height: 100%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  height: 40px;
  background-color: blueviolet;
}

    <div class="pageWrapper">
      <header class="header"></header>
      <main class="main">
        <div class="innerWrapper">
          <button>Button</button>
        </div>
      </main>
      <footer class="footer"></footer>
    </div>

据我所知，innerWrapper 没有获得 main 的 100% 高度，因为 main 的高度没有明确定义，它是 flex:1。这是对的吗？在这种特殊情况下，如何让 innerWrapper 获得 main 的高度？

Answer 1

只需从子项中删除 flex 和 heigh 属性，并将 align-items: stretch; 和 display: flex; 添加到父项。

* {
  padding: 0;
  margin: 0;
}

.pageWrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: saddlebrown;
  height: 40px;
}

.main {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.innerWrapper {
  background-color: red;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.footer {
  height: 40px;
  background-color: blueviolet;
}

<div class="pageWrapper">
      <header class="header"></header>
      <main class="main">
        <div class="innerWrapper">
          <button>Button</button>
        </div>
      </main>
      <footer class="footer"></footer>
    </div>

Answer 2

您的 .main 占用了其容器的高度/宽度。是您的 .innerWrapper 没有占据其容器的高度。

这样做的原因是 .main 的高度不明确。根据{{3}}：

<块引用>

如果没有明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位，该值计算为 'auto'

您也可以将 .main 更改为 flex 并将 .innerWrapper 更改为 flex: 1：

.main {
  flex: 1;
  position: relative;
  background-color: orange; // Added for visual only. Remove from your code.
  display: flex;
  flex-direction: column;
}

.innerWrapper {
  flex: 1;
  height: 100%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

this

Answer 3

我认为这就是您想要实现的目标...

检查代码。我添加了注释来标识添加的代码...

* {
  padding: 0;
  margin: 0;
}

.pageWrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: saddlebrown;
  height: 40px;
}

.main {
  flex: 1;
  position: relative;
  background-color:blue;
}


.innerWrapper {
  height: 100%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  /*code added here*/
  position:absolute;
  top:0;
  bottom:0;
  /* if you want to add button to center add this property here right:50%;*/
}

.footer {
  height: 40px;
  background-color: blueviolet;
}

<div class="pageWrapper">
      <header class="header"></header>
      <main class="main">
        <div class="innerWrapper">
          <button>Button</button>
        </div>
      </main>
      <footer class="footer"></footer>
    </div>

Answer 4

如果您在类 block 中设置显示值 flex 而不是 .innerWrapper

* {
  padding: 0;
  margin: 0;
}

.pageWrapper {
  display: flex;
  flex-flow: column wrap;
  min-height: 100vh;
  height: 100vh;
}

.header {
  background-color: saddlebrown;
  height: 40px;
}

.main {
  flex: 1 1 auto;
  position: relative;
}

.innerWrapper {
  height:100%;
  background-color: red;
  display: block;
  text-align:center;
}

.footer {
  height: 40px;
  background-color: blueviolet;
}

<div class="pageWrapper">
  <header class="header"></header>
  <main class="main">
    <div class="innerWrapper">
      <button>Button</button
    </div>
  </main>
  <footer class="footer"></footer>
</div>

如何修复子元素没有获得其父元素的高度？

4 个答案: