1

コンテンツがajaxで動的にロードされるページを作成しました。ロードされたコンテンツの背景色を透明な白に設定しました。コンテンツがページ全体に表示されない場合は、このcssのように、背景をページの下部に拡張する必要があります。minux20px：

#content {
    background-color: rgba(255, 255, 255, 0.5);
    position:absolute;
    top: 20px; left: 380px; bottom: 20px;
    padding: 20px;
}

コンテンツがページの下部を過ぎて拡張する場合、背景も一緒に拡張し、背景の下に20ピクセルの余白を残します。通常、私はdisplay：blockを使用します。これを達成するために、しかしそれは底を上書きします：20px; ルール。両方の状況でCSSを希望どおりに機能させるにはどうすればよいですか？

4

2 に答える 2

0

うーん、フィドルの例がないとあなたのニーズを理解するのは難しいですhttp: //jsfiddle.net：| あなたが言っていることから、体の問題のようです。ロードされたセクションに「ボディクラス」（幅と高さを100％ですべてのコンテンツを追加するコンテナdivを作成）を設定できます。これには、背景を設定でき、すべてのセクションを埋めないコンテンツにのみ設定できます。別の背景色を適用し、必要なマージンボトムを設定するdivコンテンツで表示します。乾杯。

于 2012-09-25T19:05:14.903 に答える
0

代わりに次のようにしてみてください。

#content {
  margin-bottom: 20px;
  padding: 20px;
  min-height: 800px; /* height of the window */
  background-color: rgba(255, 255, 255, 0.5);
}​

jQuery を使用して min-height をユーザーのウィンドウの高さと等しくなるように設定することを検討してください。

var windowHeight = $(window).height();
$("#content").height(windowHeight);
于 2012-09-25T18:51:01.970 に答える