super胡 <br> * { <br> margin:0;<br>padding:0;<br> } <br>html,body, #wrap <br>{ <br>height: 100%;<br>} <br>body > #wrap <br>{<br>高さ: 自動; <br>min-height: 100%;<br>} <br>#main <br>{ <br>padding-bottom: 150px;<br>} /* フッターと同じ高さである必要があります */ <br>#footer { <br> 位置: 相対; <br> マージントップ: -150px; /* フッターの高さの負の値 */ <br> height: 150px; <br> clear:both;<br> border-color:1px 単色赤;<br> 背景:赤;<br> } <br>/* CLEAR FIX*/ <br>.clearfix:after<br>{content: "."; <br> 表示: ブロック; <br>高さ: 0; <br> クリア: 両方。 <br> Visibility: hidden;<br> } <br>.clearfix {display: inline-block;<br>} <br>/* IE-mac から非表示 */ <br>.clearfix { height: 1%;/*zoom:1*/<br>} <br> <br> < ;/style><br> </head><br> <body><br> <div id="wrap"> <br><div id="main" class="clearfix"> <br></div> <br></div> <br><div id="フッター"> sagsdhgdf<br></div> <br> </body><br></html><br> ご覧のとおり、ここでは脚の高さが 3 回繰り返し使用されていますが、これは重要であり、3 つの高さには同じ値を使用する必要があります。wrap </p> <div> ; の高さのプロパティは、枠全体の高さまで引き伸ばされ、マージンが大きいため、メインがラップの領域にあるため、メインのパディングはラップ 100 になっているため、フッターがメイン <div> のパディングの位置よりも上に移動します。 <p> 計算が完了しない場合は、declearfix main </p> <div> も必要です。 <br>.clearfix:after {content: ".";<br> display: block;<br> 高さ: 0;<br> クリア: 両方;<br> 可視性: 非表示;}<br>.clearfix {display: inline-block;}<br>/* IE-mac から非表示 */<br>* html .clearfix { height: 1%; }</div> </div> </div>
