0

ウェブページの右下隅に表示する画像をマークアップしようとしています。

ページの全体の幅を 100% に設定し、写真を一番下に浮かせるように設定すると、トリックは完全に行われますが、上記の写真は幅が 1600 px 前後の大きな写真なので、ページを開くと小さなウィンドウのブラウザでは、フローティング画像は整列されますが、スクロールバーが表示され、フローティング画像なしでページの全幅にスクロールします..

body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}

したがって、2番目のアプローチ：本文またはラッパーdivの幅を、前述の上部の画像よりも大きくする：

本文{最小幅:1600px;}

誰かが 1600px よりも大きな画面を持っていない限り、見栄えがします...フロートは 1600px で終わります。

最初のソリューションを微調整する必要がありますが、どうすればよいかわかりません。レスポンシブなフローティングは、おそらく素晴らしいjqueryになるでしょうか？ありがとうございます

問題は真珠です:)

4

3 に答える 3

0

試してみてくださいposition: fixed; z-index: -1;、それはあなたが探しているものを正確に行います。 例

于 2013-01-16T18:14:18.623 に答える
0

更新しました

この作品かもしれません：

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%
    min-width: 1648px; /* the width of the longest element */
}

#bottomwrap {
    /* replace with your background color */
    background: url(path/to/picture) bottom right no-repeat;
    width: 100%;
}

をリセットしbody margin、paddingゼロにbody heightして 100% に設定することを忘れないでください

アップデート：

あなたのケースのソリューションを更新し、HTML 構造を変更しました。ここで確認できますhttp://jsbin.com/ulatis/1/edit

于 2013-01-16T18:17:45.147 に答える
0

ここで背景画像を使用する必要があるようです。背景を 100% 幅の div に配置し、背景の位置を に設定しright bottomます。 

div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}
于 2013-01-16T18:02:59.980 に答える