0

div'lower'で画面の下部をbg画像で埋めるにはどうすればよいですか？

Div'upper'はコンテンツに応じて大きくなります。

赤い線はビューポートを示します。

ここに私がテーブルでそれをどのようにしたかの例があります：Splendid

でもテーブルレスにしたい!!

ここに画像の説明を入力してください

4

4 に答える 4

1

警告:この回答は元の問題を解決するものではありません。私は彼の質問を誤解しました。作成者が達成したいことは、CSS のみではおそらく不可能です。なぜなら、スティッキー フッター、常に表示されるフッター ヘッド (タスクバーのような)、およびメイン コンテンツとフッターの両方の動的な高さの組み合わせがあるためです。

粘着性のあるフッターを探す可能性のある人のために、スニペットを残しておきます。

Fiddle: スティッキー フッターを使用した動的コンテンツ

タイマーを使用して、「上部」コンテナに常にコンテンツを充填する様子を説明しました。

基本的に、次の HTML があります。

<div class="wrapper">
    <div class="upper">
        <span></span>
    <div class="push">
    </div>        
    </div>

    <div class="lower">
        Footer content goes there.
    </div>
</div>​

そしてもちろん、CSS:

.upper{
    min-height: 100%;
    height: auto !important;
    width: 100%;
    height: 100px;
    background: blue;
    margin: 0 auto -100px; /* The negative value of the footer height. */
    color: white;
}
.lower, .push {
    height: 100px; /* Footer and Push need to have equal height */
    background: red;
    color: white;
}​

コードの説明:

これは基本的に、いわゆるスティッキー フッターの概念であり、追加の調査を行うことができます。メイン コンテンツとフッターがあり、プッシュ コンテナーでちょっとしたトリックを使って文字通りフッターをプッシュし、コンテンツと重ならないようにします。

余分な CSS はデモのためだけのものです。クリーンアップして、必要な方法で実装できることを願っています。

于 2012-05-09T18:36:10.570 に答える
0

これは正確にはあなたが求めているものではありませんが、下のdivをスクラップして、大きな背景画像をに追加することができますbody。background-position: center bottom;画像を画面の下部にハグさせるために適用します。これは、画像の背景がはっきりしている場合に特に効果的です。

body {
    background: url('largeImage.png') no-repeat center bottom;
}
于 2012-05-09T18:27:41.313 に答える
0

うーん、divの高さを「低く」設定しましたか？または、コンテンツに柔軟性を持たせたい場合は、最小の高さでもかまいません。

于 2012-05-09T18:29:27.487 に答える
0

Javascriptを使用upperして、ブラウザのウィンドウの高さからdivの高さを差し引くことができます。結果が0より大きい場合は、lowerdivをその高さに設定しますか？

ウィンドウサイズを取得するには、この関数を使用することをお勧めします。最近テストしていませんが、クロスプラットフォームだと思います。

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}
于 2012-05-09T18:45:07.960 に答える