3

ページ コンテンツの周りに #Wrap という名前の div があり、すべてを上に移動する次の関数を記述したため、上部のナビゲーションが部分的にページから外れ、コンテンツの画面スペースが増えました。

$('.NavShrink').click(function(up) {
  $('#Wrap').animate({ top: '-=130px'});
  $(this).css('display', 'none');
  $('.NavExpand').css('display', 'block');
})

私はまた、それを再びダウンさせるために以下を持っています:

$('.NavExpand').click(function(down) {
  $('#Wrap').animate({ top: "+=130px"});
  $(this).css('display', 'none');
  $('.NavShrink').css('display', 'block');
})

現時点での私の問題は、すべてが画面から外れてもページが完全な高さを維持しているように見えることです。これにより、コンテンツの下部に 130 ピクセルの空白スペースが作成されます。これを回避する方法は何ですか？

私は#Wrap現在、スタイルを持っていますposition:relative;が、運が良ければ試してみましheight:100%;たheight:auto;。

編集: ここにページがあります: http://www.emilekelly.com/TestFolder/index.html

4

1 に答える 1

1

で使用position: absoluteし#wrapます。

なんで？

position: relativeは現在の位置に対して上に移動して#wrapいますが、ブラウザは「あるべき」場所の下のスペースを考慮に入れています。

ただしposition: absolute、配置を調整し、通常のフローのコンテキストから外して、下にあるものを折りたたむことで、そのスペースを取り除くことができます。

于 2012-10-09T11:04:22.320 に答える