"Content-footer" divを修正する必要がありました。私のページを風景モードでi-phoneまたはi-padで表示してもうまくいきますが、ポートレートモードの "Content-footer" divは表示されません。 「Google Chromeデバイスモード」で自分のコードを確認し、「ポートレートモード」と「ランドスケープモード」をチェックしてください。 2つのスクリーンショットを添付しました。 "Content-footer" divは、ランドスケープモードで表示されます。 iPadまたはiPhoneのポートレートモードでフッターdivが表示されない
"Content-footer" divはポートレートモードでは表示されません。何らかの理由(と私は理由を知りません...)、.Header-wrapper
については
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;
}
質問と同じコードを使用していますか?私はポートレート/ランドスケープに問題はありません。 http://codepen.io/anon/pen/BKdJza – Pimmol
速い返答をいただきありがとうございますが、このコードはどのオンラインエディタにも表示されません。ただ1つのhtmlページを作成し、Chrome Deviseモードで表示してください。このコードは、jsfiddleや他のエディタで作業を完了しました。しかし、HTMLページでは動作しません。 –
@ Pimskie、答えとして投稿してください。ニースの発見。 –