2017-01-28 2 views
-1

hereを学んだことがありますが、最小サイズのウィンドウのサイズを700ピクセルに制限したいと思います。ウィンドウのサイズ変更時のCssフッターの動作

ウィンドウのサイズを変更すると、ウィンドウのサイズが700ピクセル以下になると、フッターの横に空白が残っています。つまり、画面全体には表示されません。私が間違ってhere..hereだかわからないんだけど

は私のjsBinの例です:事前に

`https://output.jsbin.com/gawidovijo` 

感謝。 body

+0

'body'に' position:relative; 'を追加して' margin:0 0 100px; 'を' padding:0 0 100px; ' –

+0

に変更してください@MichaelCoker intresting!あなたの提案がうまくいく理由を少し説明してください。どのように私と違うのですか? – Slashy

答えて

0

position: relative;を追加し、margin: 0 0 100px;あなたのフッター

padding: 0 0 100px;には変更は絶対に配置され、そしてそれはに関連して配置されるように相対的な親を必要とします。それがなければ、 html要素に相対的な位置になりますが、これはビューポートの幅と同じです。要素を絶対的に配置するときはいつでも、絶対配置された要素を配置したいと考える親を相対的に配置してください。あなたのページの max-widthbodyに定義しているので、フッタを bodyに相対的に配置することは意味があります。

そして、その変化に、あなたのフッターが今bodyに関連して配置され、それはbodyの下マージンがよう100pxスペースに表示するフッターを取得するには、フッターの下に表示されますを意味し、あなたは変更する必要がありますそのスペースはmarginからpaddingになり、フッターがそこに配置されます。

0

スラッシュ、

参照した空白が表示されません。私はWindows 7でFF、Chrome、IE11を見直しました。ブラウザのキャッシュをクリアするだけでいいのでしょうか?

注意すべきいくつかの他のアイテム:

  • 位置:絶対。親コンテナとの関係にあります。 は、position:fixedを使いたいかもしれません。これはブラウザウィンドウを親の として使用します。
  • また、マージンボトムではなく ボディでpadding-bottomを使用することもできます。
  • 最後に、ボックスサイズ:border-box;デフォルトでは、ボックスサイズは content-boxに設定されています。幅を100%に設定してからパディングを追加すると、コンテンツボックスで が100%より広くなります。

要素を絶対配置する場合、絶対配置された子との親の位置を使用する場合は、親の位置を定義する必要があります。ここでは、コンテンツの右上にdivが必要な例を示します。ここでは、体内で始まるHTMLは次のとおりです。ここで

<body> 
    <div class="parent"> 
    <div class="child">This element is in the top right</div> 
    <p>Here is the parent content</p> 
    </div> 
</body> 

はCSSです:

.parent{ 
    position: relative; 
} 
.child{ 
    position: absolute; 
    top: 0px; 
    right: 0px; 
} 

私は位置定義していない場合:相対;その後、.parentで。子供は身体に基づいて配置されるだろう。

まず、物事を正確に配置するのはちょっと難しいかもしれません。これがあなたに役立つことを願っています

+0

マイケルが答えに私を打つように見えます。私の投稿が提供する唯一の新しい情報は位置です:固定;ボックスサイズ:border-box;がんばろう! – Pagri

関連する問題