2016-12-09 16 views
0

私のページの右下に画像(ロゴの種類)を配置したいと思います。背景画像が右下に配置されていない

ページは非常に簡単である:

  • (図中赤)<html>
  • <header>
  • div#content

ヘッダはである<body>

  • 固定された高さ。 #contentは非常に異なる高さを持つことができ、動的に変化します。

    私が使用するCSS:

    html: { 
        height: 100%; 
    } 
    
    body { 
        min-height: 100%; 
        position: relative; 
        width: 100%; 
        background-image:url('http://www.imagespourtoi.com/lesimages/mickey/image-mickey-3.jpg'); 
        background-repeat:no-repeat; 
        background-size: 100px; 
        background-position: right bottom; 
        background-color: grey; 
    } 
    
    header { 
        width: 50%; 
        height: 180px; 
    } 
    
    #content { 
        width: 50%; 
    } 
    

    HTML:左側に

    <html> 
        <body> 
        <header> 
        </header> 
        <div id="content"> 
        </div> 
        </body> 
    </html> 
    

    enter image description here

    #content高さは右側に、画面よりも大きいときに何が起こったかでありますそれが小さいときに。 図中の雲は背景イメージを表します。左に表示されるのは、画面の右下隅に表示され、<body>(期待された動作ではありません)ではありません。

    私は間違っていますか?

    NB:私はjsFiddle上、このような動作を再現することはできません...

    [編集]申し訳ありませんが、エラーのコピー&ペーストが、はい、それは私のCSSファイルでhtmlなくheight

  • +0

    ほとんどの場合、あなたのhtmlと体は、高さ100%の宣言が必要です。 'html、body {height:100%; } ' –

    +0

    申し訳ありませんが、編集しました(私はjsFiddleで間違って入力しましたが、私のCSSファイルで正しく入力しました) –

    +0

    body要素に' height:100% 'を設定した場合、コンテンツが大きくなる –

    答えて

    1
    ました

    htmlタグは、同様に、高さの宣言が必要です。

    html { height: 100% }

    +0

    申し訳ありませんが、私は編集しました(私はjsFiddleで間違って入力しましたが、私のCSSファイルでは正しく表示されています) –

    関連する問題