ウェブページの下部にある空白を削除するにはどうすればよいですか？

Question

私はWordpressを使用してサイトを作成しようとしています。私はテーマを作成し、私のページのほとんどは、ページのテンプレートを使用して作成されているので、私はブログの外観から遠ざかりたいと思っていました。

私はポートレートモードで自分のipadでサイトを見るまではすばらしく見えました。私はすべてのページの下部に巨大な空白を持っています。私はChrome Canaryの開発者用ツールを使用しましたが、ウィットスペースの原因となっている要素を見つけることができませんでした。

私は数日間フォーラムを検索していて、他の人にこの問題を助けてくれました。今まで運がない。

私のようなメディアクエリを使用してみました：私は私のiPadでポートレートモードにいるとき、まだ、すべてのページの下部にある巨大なホワイトスペースを持っている

@media only screen and (min-width: 768px) and (max-device-width: 1024px) and  (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1) { 

Html,body{ 
    Overflow:hidden; 
} 

。

この問題の修正方法をお探しください。私のサイトへのリンクは次のとおりです。http://www.davidsdrift.com/

ありがとうございました。

Answer 1

2を削除するために、コンテンツ利用率ではないピクセルを塗りつぶしたい場合は、単にそれ以外

background-size: 100% 100%;

を追加し、100％あなたの高さを埋めるために画像を入れたい場合は

Answer 2

サイトのデザインに静的な高さが設定されている場合は、その高さよりも高いブラウザ（ほとんどのモバイルブラウザは縦向きなので）は、その時点で停止し、下には何も置きません。ブラウザは、デフォルトでは「なし」（つまり空白）になります。

シンプルな背景色を設定して、デザインされた領域（body {background-color: #CCCCCC;}）の下の白くデフォルトにするのではなく、それよりも魅力的なものを試してみることができます。

または、（gulp）静的な長方形のデザインを使用しないようにサイトを完全に再トラッキングできます。あなたは完全な高さ

Answer 3

それは依存しますbackground-sizeからの特性はbodyであり、background-size: cover;を加える。

は、あなたの背景は今にかかわらず、解像度の画面全体をカバーする必要があり

html { 
    min-height: 100%; 
} 

このセレクタを追加します。またbackground-position: center center;を追加することもできます。

例

html { 
    min-height: 100% 
} 
body { 
    background: url(images/homePage.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center; 
} 

Answer 4

ジョーの答えに追加するには：あなたはポートレートモードでiPad上でホワイトスペースを見ている理由は、理由アスペクト比とあなたの背景画像の向きです。

これには数多くの修正がありますが、余分な空白で何をしたいかによって異なります。背景全体を覆い、背景を繰り返し、CSS3のプロパティを使ってミラー効果を作成するなど、背景を拡大することができます。

あなただけのポートレートモードでは、この使用時に背景が全体のスペースを取るしたいと仮定すると：メディアクエリを追加し、また

@media (orientation:portrait){ 
    html{ min-height:100% } 
    body { 
    background:url(images/homePage.jpg); 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center center 
    } 
}