1

CSSは私のお茶ではないことを認めますので、ここで明らかな何かを見逃している可能性があります。私の問題は、「clear：both;」の両方のCSSプロパティを持つ要素がある場合です。および「高さ：100％;」要素は実際にはページの高さを超えてしまいます。次に例を示します：http：//jsfiddle.net/d9mv7/

青いフレームによりスクロールバーが表示され、「100％」であるにもかかわらずページの高さを超えていることに注意してください。「clear：both」プロパティを削除すると、期待どおりにレンダリングされます（JsFiddleは不要なスクロールバーを追加しますが、通常のレンダリングではその問題は発生しません）。

私の意図は、下部のdiv（JsFiddleの青いもの）をページの高さの下部まで移動させることですが、ページの下部で停止し、側面と同じように境界線を正しく描画します。問題は、divの上にfloatプロパティを持つコンテンツがあり、正しくレンダリングするにはdivに「clear：both」プロパティが必要なことです（ピクセルサイズをハードコーディングする必要がない別の方法がない限り）。

上部（float要素）と下部のdivの両方を追加のdiv内にラップして、高さがページではなくそのdivを基準にするようにしました。これにより、オーバーラップが小さくなる（そしてスクロールバーが短くなる）ように見えましたが、消えることはありませんでした。「オーバーフロー：非表示」を使用します。それでもdivとコンテンツが下部を超えてスクロールバーを非表示にするだけなので、私にとっても機能しません。私がこれを処理することをどのように提案しますか（できればJavaScriptなしで）？

4

1 に答える 1

1

他の2つのポスターが示唆しているように、私はJavaScriptソリューションを使用することになりました。誰かがdivのサイズ/内容について仮定しないCSSのみの解決策を見つけた場合は、それを投稿してください。受け入れられた回答を変更します。これが今のところ私がそれをどのように扱っているかです（これはjQueryを使用しますが、同様のロジックはネイティブJSで実行できます）：

$('#second-panel').height(document.height-$('#first-panel').height());

または、divに十分な厚さのマージン/パディング/境界線があり、それらも測定に含めたい場合（element.height（）には含まれないため）、outerHeightを使用できます。

var secondPanel = $('#second-panel');
var borders = secondPanel.outerHeight()-secondPanel.height();
secondPanel.height(document.height-$('#first-panel').outerHeight()-borders);
于 2012-10-11T20:42:44.217 に答える