粘性页脚横向打破

Question

我的粘性页脚不能横向打印。我试图创建两个div，每个div的高度相同，当移动设备（宽度为749px或更小）处于纵向时，它们将共同占用页眉和页脚之间的所有可用高度。但是，当设备处于横向模式时，我希望divs保持最小高度为172像素。

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

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

“.index-content”是我正在使用/试图用来将页脚保留在页面底部的div。标题的固定高度为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％的高度和100vh，还有一些小tweeks按下面的代码：

如果你想箱内显示，在横向模式下某些特定高度（其中高度是如此之少），将min-height指定给wrapper-content类。

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