2016-03-30 9 views
2

"Content-footer" divを修正する必要がありました。私のページを風景モードでi-phoneまたはi-padで表示してもうまくいきますが、ポートレートモードの "Content-footer" divは表示されません。 「Google Chromeデバイスモード」で自分のコードを確認し、「ポートレートモード」と「ランドスケープモード」をチェックしてください。 2つのスクリーンショットを添付しました。 "Content-footer" divは、ランドスケープモードで表示されます。 Content-footer" div displays in landscape modeiPadまたはiPhoneのポートレートモードでフッターdivが表示されない

"Content-footer" divはポートレートモードでは表示されません。何らかの理由(と私は理由を知りません...)、.Header-wrapperについてはContent-footer" div not displays in Portrait mode

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; 
} 
+1

質問と同じコードを使用していますか?私はポートレート/ランドスケープに問題はありません。 http://codepen.io/anon/pen/BKdJza – Pimmol

+0

速い返答をいただきありがとうございますが、このコードはどのオンラインエディタにも表示されません。ただ1つのhtmlページを作成し、Chrome Deviseモードで表示してください。このコードは、jsfiddleや他のエディタで作業を完了しました。しかし、HTMLページでは動作しません。 –

+0

@ Pimskie、答えとして投稿してください。ニースの発見。 –

答えて

1

.Content-Wrapperはビューポートよりも広い(例えば。 1024px、iPadのランドスケープよりも広い)では、フッターが見えなくなります。

たとえば、.Header-wrapper.Content-Wrapperの幅を100%にしてみてください。それが動作します

+0

ありがとうございました。私はプロジェクトの幅に "%"の代わりに "px"を使用する必要があります。私にこれのための他の解決策を教えてください。 –

+0

目的のピクセルに設定し、メディアクエリを使用してビューポート幅より大きくないことを確認します。 – Pimmol

関連する問題