javascript - 奇妙なパディングの問題

Question

このページを見てください

私が達成したいことは

と

次のjQ関数を使用して、ドキュメントの高さに基づいてdivの高さを動的に変更します

$(window).load(function() {
    $('.sideBg').css({ 'height': ($(document).height())});
});

私は何が欠けていますか？

Answer 1

不要に直面している場合はpadding、常に reset.css ファイルを使用してください。

ここからコードをコピーします: http://meyerweb.com/eric/tools/css/reset/

Answer 2

上部を固定するには、上にある を取り外す必要がありmargin-topます。.wrapper <div>

.wrapper {
    background: url("/design/img/wrapper-bg.png") no-repeat center top;
    margin-bottom: 0 !important;
    margin-left: auto;
    margin-right: auto;
    /*margin-top: 20px; remove this */
    padding-top: 120px;
    position: relative;
    width: 1020px;
}

次に、下部の高さを取得することをお勧めします.wrapper <div>:

$(function() {
  var wrapperHeight = $('.wrapper').height();
  $('.sideBg').css('height': +wrapperHeight+'px');
});

Answer 3

で を使用した方がよいのではないでしょうbackgroundかbody? この方法では、追加の要素や JavaScript も必要ありません。

body {
  background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
              url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0, 
              black radial-gradient(ellipse at center, #45484D 0%,black 100%);
  background-repeat: repeat-y;
}

background: black url(/design/img/bg/000.png);フッターに使用することを忘れないでください。

また、プレフィックス付きのバージョンも必要であることを忘れないでください

background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
                  url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0, 
                  black -webkit-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
                  url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0, 
                  black -moz-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
                  url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0, 
                  black -o-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);

体のスタイルの接頭辞のないものの前。

開発者ツールを使用してこれらの変更を行うとうまくいきます

互換性について: 複数の背景はグラデーションよりも優れたサポートを提供します (複数の背景は IE9でサポートされていますが、CSS グラデーションはサポートされていません)。実際、これは IE 9 では正しく機能しません。これはグラデーションのためです。ただし、プレフィックス付きのすべてのバージョンの前に複数のバックグラウンド フォールバック (グラデーションなし)を追加することで、グラデーションなしで IE9 で動作させることができます。

background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
            black url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0;