CSSポジショニング：左手の長いメニューがフッタの後ろに表示されます

Question

私は固定され、中央に配置されたCSSの2列レイアウトを持っています。ナビゲーションが長く、コンテンツが短いページでは、フッターはナビゲーションの下には移動しません。コンテンツエリアの最小高さに残り、ナビゲーションはフッターの後ろになります。

私はあなたが見するためのフィドルにすべて含まれています：http://jsfiddle.net/fmJqw/1/

をしかし、本質的に、私は以下の構造を持って次のように

<div id="wrapper"> 
    <div id="headerWrapper"></div> 
    <div id="bcrumbwrapper"></div> 
    <div id="midWrapper"> 
     <div id="navWrapper"></div> 
     <div id="contentWrapper"></div> 
    </div> 
    <div class="clear"></div> 
    <div id="footerWrapper"></div> 
</div> 

をCSSは次のとおりです。

#wrapper{ 
    padding:0px; 
    margin:0 auto; 
    width:1000px; 
    min-height:768px; 
} 
/*Header styles*/ 
#headerWrapper{ 
    padding:0px 0px 0px 0px; 
    margin:0px; 
    width:1000px; 
    height:175px; 
    position:relative; 
} 

#bcrumbWrapper{ 
    padding:0px 0px 0px 20px; 
    margin:0px; 
    width:980px; 
    min-height:24px; 
    position:relative; 
} 

#midWrapper{ 
    padding:0px; 
    margin:0px; 
    width:1000px; 
    height:auto; 
    position:relative; 
} 

#navWrapper{ 
    padding:20px 0px 0px 20px; 
    margin:0px; 
    float:left; 
    width:200px; 
    min-height:513px; 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

#contentWrapper{ 
    padding:15px; 
    margin: 0px 0px 0px 220px; 
    float:left; 
    width:750px; 
    min-height:503px; 
    position:relative; 
    background-color: #FFFFFF; 
} 

#footerWrapper{ 
    padding:5px 0px 0px 0px; 
    margin:0px; 
    width:1000px; 
    height:40px; 
    position:relative; 
} 

どんな助力も感謝しています！私は私の髪を引き裂いている。

Answer 1

ここのメンバーではない友人からこの回答が見つかりましたので、将来の参照用に投稿したいと考えていました。

私は両方のアイテムを左に浮かそうとしていましたが、divの1つに絶対配置を使用していたため、物事が競合していました。コンテンツラッパーで浮動小数点数を削除し、ナビゲーションラッパーで絶対位置を削除しました。私は、navwrapperがページの長さを走らせているかのように表示されるように、含まれているdivの背景色を変更しました。

は、だからとなりました：

#midWrapper{ 
    padding:0px; 
    margin:0px; 
    width:1000px; 
    height:auto; 
    position:relative; 
    background-colour: #EBE2CA; 
} 

#navWrapper{ 
    padding:20px 0px 0px 20px; 
    margin:0px; 
    float:left; 
    width:200px; 
} 

#contentWrapper{ 
    padding:15px; 
    margin: 0px 0px 0px 220px; 
    width:750px; 
    min-height:503px; 
    position:relative; 
    background-color: #FFFFFF; 
} 

htmlと不要JavaScriptに変更はありませんが！

ありがとうございました:)この回答は私の友人クリスのおかげです。

Answer 2

コンテンツを保持するdivの高さに基づいて、javasciptを少し変更して、常にmin-heightを動的に変更することができます。これは#contentWrapperだと思います。

CSSスティッキーフッタを確認することができます：http://www.cssstickyfooter.com/マークアップの性質上、動作させるにはちょっとした手間がかかります。