コンテナDIVが拡張されていない絶対配置のDIVを含む

Question

シンプルな解決方法があると思いますが、それは私には分かりません。 this pageを見ると、ヘッダだけが灰色の背景になっています。それが唯一のページのヘッダ部、及び下記コンテンツ上に延伸された時点で

#container { 
    padding: 0; 
    margin: 0; 
    background-color: #292929; 
    width: 1200px; 
    margin: 0 auto; 
} 

：灰色の背景は、私は、ページの高さ全体をダウンストレッチたい#containerのDIVによって設定されていますその中には含まれていません。 #content DIVのメインコンテンツに絶対配置があり、このdivの位置をアニメーションできるようにするために必要なものです（ナビゲーションバーの画像にマウスを合わせると表示されます）。いくつかの研究から

#content { 
    font-family: Lucida sans unicode !important; 
    color: #CECBBB; 
    text-align: justify; 
    position: absolute; 
    top: 210px; 
    padding: 20px 40px; 
} 

絶対的な位置とのdiv要素が親のDIVの高さには含まれていないように見えるだろうが、私はこの問題を解決する方法がわからないです。

私はいくつかの助けに感謝します。

おかげで、

ニック

Answer 1

あなたは（あなたがあなたの質問に述べるよう）#contentは絶対位置させる必要がある場合、あなたが望む背景を取得するための最良の方法は#content自体にbackground-color: #292929を置くことのいずれかである（おそらくいくつかの位置を調整する必要がありますし、黒を除くためのパディング）。

しかしアニメーションがホバーに開く上部のサブメニューがある場合、私はposition: relative,にメニューとコンテンツの両方のdivを設定することを提案し、代わりにあなたのスクリプトがあるように思われるよう（#contentのtop位置をアニメーション化メニューのheightをアニメーション化します（デフォルトでゼロにして、45pxの高さにアニメートします）。

Answer 2

はい、あなたは正しいです。 絶対配置の要素は、親コンテナのレイアウトではもう考慮されません。それをよりよく理解するには、CSS Positioning from A List Apartとお読みください。

1. は使用ではなく、絶対配置レイアウト
2. 打ち常にcontainer要素の高さを更新するcontainer要素
3. JavaScriptを使用の高さ、レイアウトを浮かべ：

   私見では、あなたは多くのソリューションを持っています。

Answer 3

#content { 
    color: #CECBBB; 
    font-family: Lucida sans unicode !important; 
    margin-top: 40px; 
    padding: 20px 40px; 
    text-align: justify; 
} 

マージントップを追加して、絶対位置を削除これを行います。