なぜクロムが受け入れられないのですか？0;絶対に置かれたフッターの値として？

Question

これはクロムの問題だけではありませんが、相対的な位置にあるコンテナ内に絶対配置された要素が設定されています。通常、私はこれをしませんでしたが、イメージを回転させる必要があったので、CSSのバックグラウンドプロパティを使用することはできませんでした。

何らかの理由で、私がフッターを絶対的にbottom：0の位置に置くと、右：0;それは表示されません。

HTML：

<div id="wrapper"> 
    <div id="content"> 
    </div> 
    <div id="footer"> 
    <ul> 
    </ul> 
    </div> 
</div> 

CSS：

#wrapper { 
    position: relative; 
    margin: 0 auto; 
    width: 940px; 
} 

#content { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 350px; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    z-index: 10; 
} 

EDIT：これはWordPressのサイトになるだろうと私たちは、ラッパーの高さを設定することはできませんし、ユーザーがに置くことができますテキストのトン。しかし、フッターの高さを設定することはできます。

Answer 1

高さを設定できない場合は、ラッパーからフッターを削除して親がないようにしてください。絶対位置の高さはその親から決定されます。親の「ラッパー」には高さがありません。したがって、底に浮かぶことはありません。

幸いにも体は底に行くでしょう。

ここでコードがjsFiddles

 #wrapper { 
     position: relative; 
     margin: 0 auto; 
     width: 940px; 

    } 

    #content { 
      background:#ccc; 
     position: absolute; 
     top: 0; 
     left: 0; 
     height: 350px; 

    } 

    #footer { 
     position: absolute; 
     bottom: 0; 
     right: 0; 
     z-index: 10; 
     background:papayawhip; 
    }​ 



    <div id="wrapper"> 
    <div id="content"> 
     sdfasdf 
    </div> 

</div> 
<div id="footer"> 
    <ul> 
     <li>aslfaskdjf</li> 
    </ul> 
    </div> 
​ 

Answer 2

#wrapperの高さはそれほど#footerが現れない0pxである - しかし、その0px高さ....あなたは#wrapperに高さを与える場合#footerが右

上の赤枠であることがわかりますsee hereそして、それは本当のコードの上に実際にその内容remove its height property

Answer 3

とフッターと同じ高さにするために#footeryou can see it以上に高さを適用しますが、あなたの#wrapperは相対的な位置と#wrapper中にあなた#footerを持っています。 #footerの位置はwrapperに従って整列されます。もしwrapperに高さを与えるなら、それを見ることができます。

HTML：

<div id="wrapper"> 
    <div id="content"> 
    </div> 
    <div id="footer"> 
    <ul> 
your_content 
    </ul> 
    </div> 
</div> 

CSS：

#wrapper { 
    position: relative; 
    margin: 0 auto; 
    height: 200px; 
    width: 940px; 
} 

#content { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 350px; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    z-index: 10; 
} 

あなたがここにhttp://jsfiddle.net/8DZ5R/

例この問題を解決する別の方法を参照することができ、簡単に変更する "#footer" の位置 "絶対" に "静的な "ラッパーの高さを変更する必要はありません：http://jsfiddle.net/8DZ5R/1/