Fußzeile Div nicht im Hochformat-Modus in iPad oder iPhone

Ich habe "Content-Fußzeile" div festgelegt. Wenn ich meine Seite im i-phone oder i-pad im Querformat zeige, funktioniert sie gut, aber im Hochformat wird die Inhalts-Fußzeile nicht angezeigt. Sie überprüfen einfach meinen Code in "Google Chrome Device-Modus" und überprüfen Sie "Hochformat" und "Landscape-Modus". Ich habe zwei Screenshots angehängt. "Content-footer" div wird im Querformat angezeigt.Fußzeile Div nicht im Hochformat-Modus in iPad oder iPhone

"Inhalts-Fußzeile" div wird im Hochformat nicht angezeigt.

Html-Code

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

Stil

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

Quelle

2016-03-30 Sumit patel

Sind Sie sicher, dass Sie den gleichen Code wie in Ihrer Frage verwenden? Ich habe keine Probleme im Hochformat/Querformat. http://codepen.io/anon/pen/BKdJza – Pimmol

Vielen Dank für die schnelle Antwort, aber zeigen Sie diesen Code nicht in einem Online-Editor. Erstellen Sie einfach eine HTML-Seite und sehen Sie sich den Chrome Devise-Modus an. Dieser Code wurde in jsfiddle oder einem anderen Editor bearbeitet. Aber nicht in HTML-Seite arbeiten. –

@Pimskie, poste es als Antwort. Schönes Ergebnis. –

Aus irgendeinem Grund (und ich weiß nicht, warum ..), wenn die .Header-wrapper und .Content-Wrapper sind breiter als das Ansichtsfenster (z.B. breiter als 1024px, iPad Landschaft), wird die Fußzeile aus dem Blickfeld geschoben.

Versuchen Sie, geben .Header-wrapper und .Content-Wrapper eine Breite von 100% zum Beispiel. Das funktioniert

Quelle

2016-03-30 11:25:31 Pimmol

Danke für Hilfe. aber ich muss "px" anstelle von "%" für die Breite in meinem Projekt verwenden. Bitte gib mir andere Lösungen dafür. –

Legen Sie die gewünschten Pixel fest und verwenden Sie Medienabfragen, um sicherzustellen, dass sie nicht größer als die Breite des Darstellungsbereichs sind. – Pimmol

Fußzeile Div nicht im Hochformat-Modus in iPad oder iPhone

Antwort

Verwandte Themen