在iPad或iPhone的縱向模式下不顯示頁腳div

我需要修復「Content-footer」div。如果我在橫向模式下在i-phone或i-pad中顯示我的頁面，它工作正常，但在縱向模式下「Content-footer」div不顯示。您只需在「Google Chrome設備模式」中檢查我的代碼，然後選中「縱向模式」和「橫向模式」。我附上了兩張截圖。 「Content-footer」div以橫向模式顯示。 在iPad或iPhone的縱向模式下不顯示頁腳div

「內容頁腳」div在縱向模式下不顯示。

HTML代碼

<body> 
    <header> 
     <div class="Header-wrapper"> 
      <h3>Header data</h3> 
     </div> 
    </header> 
    <content> 
     <div class="Content-Wrapper"> 
      <div style="Content-Data"> 
       <h3>Content Data</h3> 
</div> 
     </div> 
     <div class="Content-footer"> 
      <h3>Content Data Footer Fixed</h3> 
</div> 
    </content> 
    <footer></footer> 
</body>

風格

.Header-wrapper 
{ 
    width:1200px; 
    background-color:#ffb3b3; 
} 
.Content-Wrapper 
{ 
    border:1px solid black; 
    width:1200px; 
    position:relative; 
    min-height:600px; 
    height:auto; 
} 
.Content-Data 
{ 
    min-height:600px; 
    height:auto; 
    margin-top:10px; 
    margin-bottom:20px; 
} 
.Content-footer 
{ 
    bottom:0; 
    background-color:orange; 
    position:fixed; 
    width:1200px; 
}

來源

2016-03-30 Sumit patel

你確定你使用的代碼與你的問題相同嗎？縱向/橫向我沒有問題。 http://codepen.io/anon/pen/BKdJza – Pimmol

感謝您的快速回復，但不要在任何在線編輯器中顯示此代碼。只需創建一個HTML頁面並將其看到Chrome設計模式。此代碼在jsfiddle或任何其他編輯器中完成。但不能在html頁面中工作。 –

@Pimskie，將它作爲答案發布。很好的發現。 –

出於某種原因（我不知道爲什麼。），當.Header-wrapper和.Content-Wrapper比視口寬（例如。寬度超過1024像素，iPad風景），頁腳被推出視圖。

例如，嘗試給出.Header-wrapper和.Content-Wrapper的寬度爲100％。這工作

來源

2016-03-30 11:25:31 Pimmol

感謝您的幫助。但我必須在我的項目中使用「px」而不是「％」作爲寬度。請給我其他解決方案。 –

將其設置爲所需的像素並使用媒體查詢以確保它們不高於視口寬度。 – Pimmol

在iPad或iPhone的縱向模式下不顯示頁腳div

回答

相關問題