私のウェブサイトのURL：http: //piquantblog.com
コンテンツの下とフッターの上にあるホームページに表示される巨大な空白の原因がわからなかったので、私はそれが私を悩ませることはないだろうと思って、コンテナを固定の高さにしました。明らかに、私が投稿ページのコーディングを始めたとき、これは最終的に私のレイアウトに干渉しました。
今、私はすべての可能なコンテナの高さを調べて作成しました：autoそして私はその膨大な量の空白の原因を見つけることができないようです。このスペースはChromeとFirefoxの両方で表示されるため、ブラウザの問題ではないようです。
何か案は？？
クロム、空白を右クリックして、この要素を調べます。解決策が見つかるまで、すべての要素と css 属性を html として編集できます。見つけたら、css とコア ファイルを編集して解決します。
あなたの問題は相対的な位置です。
あなたのコードを調べたところ、#container 要素内のすべての要素が負の上/左座標と相対位置を使用して配置されています。
相対配置を使用するたびに、要素が占めているはずのスペースが占有されたままであり、位置座標が要素の視覚化を別の場所に移動するだけであると想像する必要があります。
これらの要素の高さの合計を合計すると、合計で 460+620+6*300 = 2880px になります。
柔軟な方法で必要な結果を得るには、floatのみを使用する必要があります。要素に残して、すべての要素に適切に定義された幅(これは重要です) と、できれば高さもあることを確認します (ただし、それほど重要ではありません)。 .
<br style="clear: both" /> で要素リストを終了します
これは古典的な初心者の間違いです。relative を使用すると追加のスペースが生成され、fixed/absolute を使用するとデザインが固定され、float を使用すると柔軟性が得られ、スペースが回避されます。
削除位置: 相対; 上: NNpx ; left: #post-16 など、#container 内のすべてのアイテムからNNpx を取得し、#container 内のすべてのアイテムでfloat:leftを使用します。
フロートを適用した後、要素を離すためにマージン/パディングなどを調整する必要があります。