私は約 1 週間コーディングしており、すべて独学で学んでいます (これで、このコードの多くのエラーが説明されることを願っています)。
フッターをページの下部に固定するために、多くの例を試しました。ラッパーまたはフッターの「position:absolute」を変更しようとすると、ブラウザー ウィンドウとヘッダーの間に隙間ができるか、フッターが上部に表示されます。
これを修正する方法がわかりません。(私のコードに関するいくつかのヒントも大歓迎です!)
HTML http://pastebin.com/ksgJSUpz
CSS http://pastebin.com/i9nPtYkU
ありがとう！
問題はposition:absolute、コード全体で使用していることです。絶対配置は、ドキュメントの流れを壊します。
相対位置を使用する場合、または位置をまったく定義しない場合 (静的位置)、要素は次々に実行されます。あなたのコードでは、各要素の終わりの高さを計算して、前の要素が手動で終了する次の要素を開始する必要があります。これは、絶対配置された要素が他の要素を押し下げないために発生します。彼らはあたかも高さがないかのようです。たとえば、ヘッダーの高さが 100px になっているとします。次に、絶対位置と上位 100px で情報を開始します。
あなたのフッターは、あなたが彼に指示した絶対位置に移動して座ります. 問題は、高さが可変の要素があるため、その位置がわからないことです。「bottom:0;」と入力すると 絶対配置では、ヘッダーは親の下部に配置されます。あなたの場合の親は、特定の高さが定義されていないラッパーです。したがって、 #wrapper はそのコンテンツの高さを取得しますが、そのコンテンツはすべて内部に絶対的に配置されているため、フローを中断すると述べたように、それらから高さを取得しません。代わりに、#wrapper はドキュメント全体ではなく、ウィンドウの高さを取得します。
最善の方法は、絶対位置を指定せずにページを再設計することです。
いくつかの簡単な修正は、ラッパーに次のような特定の高さを与えることです。height: 1200px;
これにより、フッターがそれらの 1200 ピクセルの下部に配置されます。
別の解決策は、フッターに固定配置を使用することです。これにより、スクロール中でもフッターがウィンドウの下部に固定されます。
しかし、実際にすべきことは、最初からページを再設計し、必要のない場所に絶対配置を避けることです。