粘性頁腳橫向打破

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>