0

マイページはこんな感じ

<div id="wrapper">
    <div id="header"></div>
    <div id="main"></div>
</div>

ヘッダーの高さは固定です。
メイン div には背景画像があります。

メインの div を画面全体に表示して、画像が一番下に表示されるようにします。

だから私はした：

div#main {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(url);

    height:100%;
    min-height:100%;
}

これは機能しませんでした。画面全体を埋めるように div の高さを設定するにはどうすればよいですか?

別の解決策は、画像を本文に設定することです。

body {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(url);
}

ここで、スクロール時に画像が下部に固定されないという問題が発生しました。実際にはウィンドウサイズの高さに固定されています。

background-attachment: fixed;背景画像がまったくスクロールしないため、解決策でもありません。

明確化

コンテンツが大きすぎる場合=>スクロールバーがあり、背景画像が下部に固定されなくなりました。それが主な問題です。本体の背景色です

@アンドレアリギオス

これは私が意味するものです：

ここに画像の説明を入力

ソース

http://themelandia.ilijatovilo.chで確認してください
。コンテンツが大きくなるまでウィンドウのサイズを変更し、下にスクロールします。
うまくいけば、私の言いたいことがわかるでしょう。

4

6 に答える 6

1

更新 (r5)

div背景を含めるために別のものを使用し、それpositionを tofixedおよびz-index-1 に設定します。

#bg-trick {
    background: url(http://images1.fanpop.com/images/image_uploads/Naruto-Uzumaki-uzumaki-naruto-964976_692_659.jpg) bottom center no-repeat;
    position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
}

デモはここで更新されますhttp://jsbin.com/idubom/5/edit

于 2013-01-17T13:35:46.760 に答える
1

body テクニックを使用しますが、div スタイリングで...次をスタイルに追加します...

#main {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(url); 
    background-attachment: fixed;
}
于 2013-01-17T13:36:52.653 に答える
1

子要素を最大 100% まで拡大できるようにするには、最初に親要素の高さを 100% に設定する必要があります。

次のように、html、body、および #wrapper の幅と高さを 100% に設定します。

html, body, #wrapper
{
  height:100%;
  width:100%;
}

#wrapper で背景画像を適用します (#main ではなく #wrapper をお勧めしますが、画像の一部が上から切り取られるのが気になる場合は、#main を使用します)。

これはjsfiddleのサンプルです。

于 2013-01-17T13:44:46.490 に答える
1

更新された[DEMO] 1を確認してください。これはあなたが探しているものです。

説明:

    div#wrapper{
    height: 100%;
    min-height: 100%;
    width: 100%;
    background-color: red;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/article_large/public/2012/08/20/298141-apple-aapl-stock-price-becomes-most-valuable-in-history-but-there-s-st.jpg);
    position:absolute;
    bottom:0;
}
div#header {
    height:80px;
    background-color:green;
}

div#main {
    padding: 60px 0px;
    min-height: 200px;
    bottom: 0;
}
div#contentWrap,div#headerWrap {
    width:960px;
    margin:0 auto;
    text-align:center;
}

**重要なポイントは、ラッパーに絶対位置/固定位置を追加することです。

画像を全幅で表示するには、body を 100% の高さとする必要があります。あなたのコードでは、残りは私には問題ないようです。

こちらも更新されたDEMOかもしれませんが、これはあなたが探しているものです。

于 2013-01-17T13:48:25.500 に答える
1

編集:あなたのサイトに基づく最終的な解決策:

追加

overflow: auto;
position: fixed;

あなたの div#wrapper ルールに。

編集：

新しいソリューション: http://jsfiddle.net/SxPyW/2/

を追加しtop: 0;、padding-top: 100px;z-index: 1;

これのことですか？

デモ: http://jsfiddle.net/SxPyW/

絶対配置ではありますが、ページをスクロールすると画像が上にスクロールします(fixed動作ではありません)?

#main {  
   /* ... your stuff... */
    border: 2px solid blue;
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
}

(境界線を表示するために挿入された境界線。境界線が必要な場合は、ここで互いにオーバーラップします。topそれに応じて属性を調整します)

于 2013-01-17T13:54:12.963 に答える
-2

すでに div に高さ 100% を指定しています。さらに、空の div によってこのような問題が発生するため、innerHTML を div に追加します。

document.getElementById('my_empty_div').innerHTML = '&nbsp';

それが役立つことを願っています。

于 2013-01-17T13:38:57.237 に答える