Question

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

另外，在每个div中，我希望嵌套一个垂直和水平居中的小div。

纵向一切看起来都很好。在横向方向上，页脚位于视口的底部，而不是位于第二个div的底部。

＆＃34;的.index含量＆＃34;是我正在使用/尝试使页脚保持在页面底部的div。标题的固定高度为192px - 页脚的固定高度为32px（2em）。

我注意到，在横向方向上，html和body元素只会延伸到视口的底部。我将每个人的身高设置为100％，所以我不明白为什么会发生这种情况。这是我的meta标签的问题吗？

我确定解决方案有点明显，但我一直无法理解。任何帮助将不胜感激！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

根据以下代码替换100％高度和100vh以及一些小推文：

如果要在横向模式下显示某个特定高度的内部框（高度太低），请将min-height指定给包装内容类。

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

粘性页脚在横向方向上断开

1 个答案: