この質問は何度も聞かれましたが、解決策がうまくいかないようです。おそらく、私が鈍すぎて、より「複雑な」状況に単純な解決策を適用できないからでしょう。
ヘッダー div の下にコンテンツ div が必要で、その下にフッター div が必要です。ヘッダーとフッターの div には 100% の幅を使用します。これは WordPress サイトにあるため、余分な楽しい div があります。さまざまなオーバーフローを試しました。非表示などです。絶対配置によりdivがフローから除外されるという概念をよく理解していますが、この状況を修正する方法がわかりません。また、コンテンツ div にトップ ポジションを適用しようとしましたが、それはフッター div には役立ちません。
どんな助けでも大歓迎です。これを行う別の方法があれば、私はすべての耳です!
このフィドルを参照してください: http://jsfiddle.net/M8Wy6/1/
<div id="home-page-wrap">
<div id="container">
<div id="header">
<div class="top-header">
<div id="logo">logo</div>
<div id="header-nav">header nav</div>
</div>
<div id="home-slider">slider</div>
<div id="main-nav">main nav</div>
</div><!-- header -->
<div id="content">
<div class="hentry">
<div id="side-bar">the sidebar</div>
<div class="entry-home">thecontent</div>
</div>
<div class="home-bottom">home bottom</div>
</div>
<div id="footer">footer</div>
</div>
</div>
body {background:#F2F2F2;}
#home-page-wrap {min-height:100%; height:auto !important; height:100%; width: auto; margin:0 auto; padding:0; background:#F2F2F2;}
#container {width:260px; min-height:100%; height:auto !important; height:100%; margin:0 auto; padding:0 40px; background:#F2F2F2;}
#header {float:left; height:50px; width:100%; left:0; position:absolute; margin:0 auto; padding:0; overflow:visible; background:#FFF;}
.top-header {width:260px; margin:0 auto; height:50px;}
#logo {float:left; position:relative; width:50px; height:25px; margin:0; padding:0; overflow:visible; border:2px solid red;}
#header-nav {float:right; display:block; height:25px; width:50px; padding:0; margin:0; color:#919395; border:2px solid red;}
#home-slider {float:left; width:100%; height:120px; margin:0 auto; background:#404040; border:2px solid red;}
#main-nav { float:left; display:block; width:100%; height:50px; margin:6px auto 6px; padding:0; z-index:100; background:#999; border:2px solid red;}
#content {width:260px; min-height:260px; height:auto !important; height:260px; padding:0; margin:0 auto; background:#F2F2F2; position:absolute; left:0; border:2px solid green;}
.hentry {width:260px; position:relative; margin:0 auto; overflow:hidden;}
.entry-home {float:left; width:100px; min-height:100px;height:auto !important;height:100px; margin:25px 0; padding: 20px 0 0 0;}
#side-bar {float:right; width:50px; min-height:100px; height:auto !important; height:100px; margin:25px; padding:0; background:#F2F2F2;}
#footer {width:100%; height:50px; padding:0; margin:0 auto; background:#666666; position:absolute; left:0; overflow:visible;}
</p>