html - 粘性页脚在横向方向中断

Question

我的粘性页脚无法横向使用。我正在尝试创建两个 div，每个高度相等，当移动设备(宽度为 749px 或更小)处于纵向时，它们将共同占据页眉和页脚之间的所有可用高度。但是，当设备处于横向时，我希望每个 div 保持 172 像素的最小高度。

此外，在每个 div 中，我想嵌套一个垂直和水平居中的较小 div。

纵向显示一切正常。在横向模式下，页脚位于视口(viewport)底部，而不是第二个 div 的底部。

".index-content"是我正在使用/试图用来将页脚保留在页面底部的 div。页眉的固定高度为 192px - 页脚的固定高度为 32px (2em)。

我注意到，在横向模式下，html 和 body 元素只会延伸到视口(viewport)的底部。但是，我已将每个高度设置为 100%，所以我不明白为什么会这样。这是我的元标记的问题吗？

我确信解决方案有些明显，但我一直无法推测出来。任何帮助将不胜感激!

@media screen and (min-width: 0px) and (max-width: 749px) {
  /* -------Header and footer stuff start-----*/
  * {
    box-sizing: border-box;
    margin: 0;
  }
  html {
    height: 100%;
  }
  body {
    height: 100%;
  }
  .index-content {
    min-height: calc(100% - 2em);
    padding: 0;
    margin: 0;
    height: calc(100% - 2em);
  }
  .footer {
    height: 2em;
    background-color: black;
  }
  header {
    height: 192px;
    background-color: black;
  }
  /*------Header and footer stuff end--------*/
  /*-------Services stuff---------*/
  .wrapper-content {
    max-width: 80%;
    margin: 0 auto;
    padding: 0;
    height: calc(100% - 192px);
  }
  .services-one {
    height: 50%;
    background-color: blue;
    min-height: 172px;
    max-width: 256px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .services-one-sub-one {
    height: 95%;
    width: 95%;
    background-color: red;
  }
  .services-two {
    height: 50%;
    background-color: green;
    min-height: 172px;
    max-width: 256px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .services-two-sub-one {
    height: 95%;
    width: 95%;
    background-color: yellow;
  }
}

<div class="index-content">
  <header>
  </header>
  <div class="wrapper-content">
    <div class="services-one">
      <div class="services-one-sub-one">
      </div>
    </div>
    <div class="services-two">
      <div class="services-two-sub-one"></div>
    </div>
  </div>
</div>
<footer class="footer">
  <p>footer text</p>
</footer>

Answer 1

按照以下代码替换 100% 高度和 100vh 以及一些小的 tweeks:

如果您想在横向模式下显示具有特定高度的内部框(其中高度要小得多)，请将最小高度分配给包装内容类。

@media screen and (min-width: 0px) and (max-width: 749px) {
  /* -------Header and footer stuff start-----*/
  * {
    box-sizing: border-box;
    margin: 0;
  }
  .index-content {
    min-height: calc(100vh - 2em);
    padding: 0;
    margin: 0;
  }
  .footer {
    height: 2em;
    background-color: black;
  }
  header {
    height: 8em;
    background-color: black;
  }
  /*------Header and footer stuff end--------*/
  /*-------Services stuff---------*/
  .wrapper-content {
    max-width: 80%;
    margin: 0 auto;
    padding: 0;
    height: calc(100vh - 10em);
  }
  .services-one {
    height: 50%;
    background-color: blue;
    max-width: 256px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .services-one-sub-one {
    height: 95%;
    width: 95%;
    background-color: red;
  }
  .services-two {
    height: 50%;
    background-color: green;
    max-width: 256px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .services-two-sub-one {
    height: 95%;
    width: 95%;
    background-color: yellow;
  }
}

<div class="index-content">
  <header>
  </header>
  <div class="wrapper-content">
    <div class="services-one">
      <div class="services-one-sub-one">
      </div>
    </div>
    <div class="services-two">
      <div class="services-two-sub-one"></div>
    </div>
  </div>
</div>
<footer class="footer">
  <p>footer text</p>
</footer>