粘性页脚在横向方向中断

Question

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

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

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

的底部

".index-content" 是 div 我 using/attempting 用来将页脚保持在页面底部的方法。页眉的固定高度为 192px - 页脚的固定高度为 32px (2em)。

我注意到，在横向模式下，html 和 body 元素只会延伸到视口的底部。但是，我已将每个高度设置为 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% height 和 100vh 以及一些小 tweeks：

如果您想在横向模式下显示具有特定高度的内部框（其中高度要小得多），请将最小高度分配给 wrapper-content class。

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

粘性页脚在横向方向中断

Sticky footer breaks in landscape orientation

html

css

landscape

sticky-footer