3

ページ内の要素を正確にレイアウトしようとして立ち往生しています。誰かが私を助けてくれることを願っています。

http://jsfiddle.net/malaikuangren/5ssqP/2/show/を確認してください。

ありがとう。

私の混乱した質問リスト:

  • dev-footer要素の高さを正確に計算したにもかかわらず、なぜ上にスペースがあるのか​​ わかりません（ドキュメント準備イベントで何をしたかがわかります）
  • この問題は、ページの右側の表の内容にもあります
  • さらに行を複製して何が起こるかを確認してください

ありがとう。

4

2 に答える 2

4

これらの要素のサイズ変更に Javascript を使用しないでください。CSS を直接使用することをお勧めします。これにより、編集が容易でパフォーマンスが向上する、よりクリーンなコードを記述できます。特定のケースでは、Javascript を使用して手動で高さを計算する必要はありません。代わりに、CSS ポジショニングを利用して、目的の結果を達成してください。

具体的には、次のように、メイン コンテンツ div を設定して、フッターとヘッダーを除くすべてのページの高さを占めます。

#content {
    position: fixed;
    bottom: 40px;
    top: 100px;
}

次に、その div の内容を調整して、オンザフライで必要なだけのスペースを占有します。たとえば、サイドバー ホルダーが #content div の高さ全体を占めるようにします。したがって、次の CSS コードで十分です。

#sidebar-holder {
    position: absolute;
    top: 0;
    bottom: 0;
}

同様に、「スプリッター」div は CSS ポジショニングを使用して配置できますが、CSS ボーダーを使用して実装する方が適切です。

#sidebar-holder {
    border-right: 5px solid black;
}

大規模で管理不能な絶対配置を回避するにposition: relativeは、親要素とposition:absolute子要素内でディレクティブを使用します。この手法を使用すると、最も近い相対親によって定義されたボックス内の絶対座標に子要素を配置できます。したがって、座標 (0, 0) は親ボックスの左上隅に対応します。

CSS のみを使用して希望する完全な動作をコードで再現しました。面倒なピクセル値の計算なしで、問題を直接修正します。さらに、Javascript を CSS に置き換えると、ページのサイズ変更時に正しく動作し、サイズ変更イベントで jQuery コードを再実行する必要がなくなります。

于 2012-12-20T14:56:41.140 に答える
0

footerとの間のギャップを埋めるのに十分なコンテンツがありませんcontent。画面を最大化していない状態でページを見ると隙間がありません。それを修正する方法はたくさんあります。heightフッターの を増やすか、min-heightコンテンツの を増やします。本当に、それはあなた次第です。

于 2012-12-20T14:54:31.043 に答える