フッターの配置に問題があります。には行きませんbottom/last。
したがって、3 つの divを持つコンテナー divと、2 つのフローティングdivの間にある中央の div ( がある) があります。float:rightfloat:leftposition:absolute
中央のものは画像なので、幅と高さを固定する必要があります。
その中央の div には、たくさんの contentを持つ別の div があります。
問題は、中央の div が幅と高さを固定しているため、子のdiv の高さを取らないことです。
だから私の問題は、それが最後に来るフッターをどのように配置するかです（コンテナの後）？
注- JQuery では、フローティングdiv の幅を100%-980px の幅に設定しました。
こんな感じです。
中央に div overflow:auto、overflow:overlay、を入れてみましたmargin-left:auto;margin-right:auto;。
質問をもう一度読んだ後、結論に達し、コードを使用して以下のフィドルを作成し、希望のサイズのサンプル画像を埋め込みます。
あなたの質問を理解している間、私が間違っている場合はお知らせください。だから私はあなたのニーズに応じて回避することができます.
フィドル: http://jsfiddle.net/ah3nr/6
デモ: http://jsfiddle.net/ah3nr/6/embedded/result/
私のアプローチ：
position:absoluteセンターから削除し、画像divに追加new divし、CSSレイヤーテクニックを使用して両方を関連付けました。
更新された CSS:
.sectionDownContainer {
width: 980px;
/*height:270px;*/
border:1px solid red;
/*position: absolute;*/
position:relative;
top: -32px;
z-index: 1;
}
/*.sectionDownMenu {
margin-left: 50px;
margin-top: 1px;
display: block;
}
*/
#image_container {
position:relative;
width:980px;
height: 270px;
margin-top:-2px;
z-index:2;
}
.sectionDownContent {
width: 640px;
margin-top: -190px;
margin-left: 50px;
position: relative;
z-index:5;
color:#000;
font-weight:bold;
}
スクリーンショット:
親のためにこれを試してください。オーバーフロー:自動;
このスタック オーバーフローの投稿も参照してください: Expanding a parent <div> to the height of its children
center-divのこのプロパティを設定する必要があります: height:auto(最小の高さを追加することもできますmin-height:400:)
フッターに関する 2 番目の質問については、これははるかに複雑です。これを行う必要があります：
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
<div id="footer">
</div>
</div>
ここで、完全な CSS を提供します (それほど簡単ではないため)。
.content {position:relative; overflow:hidden;} //hidden overflow just a hack for common issues...
.content_left {height:auto; float:left} //set height to auto (very important)
.content_center {height:300; float:left} //a fixed height also works!
.content_right {height:auto; float:right}
.content_footer {width:100%; height:auto; float:right} //for tests you can also set a fixed height
このソリューションは、Stackoverflow の他のスレッドによるものでもあります: Align DIV's to bottom or baseline、How to align of content of a div to the bottom?
しかし、それで問題が発生した場合は、これを行うことができます (私の推奨する解決策):
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
</div>
<div id="footer">
</div>
そしてそのCSS：
.content {position:relative; overflow:hidden;} //hidden overflow is just a hack
.content_left {height:auto; float:left} //set height to auto (very important)
.content_center {height:300; float:left} //a fixed height also works!
.content_right {height:auto; float:right}
.content_footer {width:100%; height:xxx; float:left} //you can use any height...
上記のすべてのソリューションは、すべての「コンテンツ」を浮動小数点に設定した場合にのみ機能することに注意してください。絶対値では機能しません! ここで見つけました：http://wiki.answers.com/Q/How_can_a_parent_DIV_wrap_around_child_DIVs_which_are_floating_left_or_right
これは div の問題によるものです: 親 div にサイズを「伝える」ことはできません! そのため、「content_center」や「content_right」などの子要素は、「コンテンツ」に、それらの長さと「コンテンツ」がどれくらいの長さでなければならないかを伝えません。そのため、子に絶対値を使用する場合、フッターのどこに配置するかを伝えることは不可能です。
2 番目の質問は、些細なことのように見えますが、非常に重要な質問であり、簡単には解決できません。
重要な更新:
私は今、解決策を見つけようとしましたabsolute。問題は、absoluteとfixedが通常の (テキスト) フローから取り出されるため、それらのサイズが他の要素のサイズ/配置に影響を与えることができなくなることです。absoluteしかし、要素は依然としてすべての子を制御していることも理解する必要があるためrelative、親ではなく子を設定する必要があります (ここでは「コンテンツ」)。だから私は最終的に解決策を見つけました.それは私が上で提案したこととほとんど反対であるため、かなり奇妙ですが、その解決策は他の人の投稿の影響を受けました. ):
<div id="header">
</div>
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
<div id="footer">
</div>
</div>
CSS (「ヘッダー」は、「コンテンツ」が「content_left」、「content_right」などのすべての位置をその子に継承することを明確に示しています):
.header {position:absolute; left:0; top:0; height:100; width:100%}
.content {position:absolute; left:0; top:100; height:auto; min-width:700} //min-width is only voluntary, but quite useful
.content_left {position:relative; left:0; top:0; width:200; height:auto;} //height:auto is important to adapt the height from containing text!
.content_center {position:relative; left:200; top:0; right:200; width:auto; height:auto;} //in the middle element, also auto-width is important!
.content_right {position:fixed; right:0; top:0; width:200; height:1000;} //we set a fixed position, but that won't influence the footer anymore!
.content_footer {margin:0 0 60 0; position:relative; left:0; bottom:-60; width:100%; height:150;} //a fixed height is also okey...but relative position is needed!
//you still need to add margin:0; border:0; padding:0 or similar values for some elements to get a good layout
ここで重要な点は、どの子要素が最も長いかを決定し、この要素の を設定position:relativeし、もう一方の要素にはabsoluteまたはを設定できるということfixedです。ただし、どの要素が最も長くなるかわからない場合は、すべての子の位置を として設定する必要がありますrelative。とにかく、すべての子をrelative（fixed必要に応じて）に設定することをお勧めします。これは、親の「コンテンツ」が絶対的な高さ位置をすでに正しく設定しているため、まったく必要がないためabsoluteです。
私は自分自身を繰り返しています：上で書いたのは、親divにサイズを伝えることは不可能です...実際には可能ですが、値absoluteとfixedが使用されている場合は不可能です。staticブラウザの標準値 ( ) またはを使用する場合にのみrelative、親 div に子のサイズが通知されるため、ページの下部にフッターが正しく設定されます。
margin:0 0 60 0さて、私のソリューションはどこでも機能します... IE (6.0 と 8.0 でテスト済み!) でも、値60が の正の値でなければならないハックのためですbottom:-60。これで、非フローティング クロスブロワー ソリューションをついに手に入れることができました。;)
あなたが経験している問題は、特定の CSS プロパティが原因で、要素がドキュメントの「フローから削除」されることです ( W3C ビジュアル フォーマット モデルを参照してください)。親要素は自然に子要素の高さに合わせて大きくなりますが、浮動要素と絶対配置要素はドキュメント フローから削除されます。いくつかのコメントで述べたように、親要素にoverflow: auto;oroverflow: hidden;を設定すると、浮動要素の周囲に境界ボックスが再確立されます。これは、親コンテナ内で要素をフロートしてから親要素に設定できることを意味overflow: hidden;し、親要素にはフロートが含まれます。ただし、これは絶対配置要素では機能しません。絶対配置ボックスは ". 唯一の例外は、ドキュメント全体が配置された要素を表示しようとして拡大することです (要素を指定するposition: absolute; top: 3000em;と、ページのスクロールバーが拡大してその要素までスクロールできるようになります)。ドキュメント以外の要素に対してこれをトリガーする方法はわかりません。
意図した効果に戻る... IE7 のサポートが必要ない場合は、 を使用display: table; table-layout: fixed;して、固定幅の中央の列と両側の可変幅の 2 つの列を実現できます。
近い将来、これは CSS の「flexbox」プロパティを使用して可能になる予定です。Flexboxでは、水平方向と垂直方向のセンタリング、レンダリングされた要素の順序の変更、要素が取る残りの可変幅の量の「フレックス」値の設定など、いくつかの気の利いた新機能が可能になります。ただし、標準は現在流動的な時期を迎えており、古い標準 (適度なサポートを享受) は新しい標準 (ほとんどまたはまったくサポートされていない) に置き換えられています。「古い」フレックスボックスと「新しい」フレックスボックス、および付属のデモを参照してください。Web 標準実装の進歩が非常に遅いことを考えると、私はそうは思いません。