0

ヘッダーとフッターの下をスクロールして正しいナビゲーションを修正するために、内部のメイン コンテンツを含む固定ヘッダーとフッターを実装しようとしています。

http://jsfiddle.net/sjUBQ/

これに近づける唯一の方法はhttp://jsfiddle.net/sjUBQ/の試行ですが、高さを 300px に固定する必要があります #main .yui3-u-3-5{background:#aaa;height :300px; スクロールバーを取得するためのoverflow:auto;}。

jQueryコードを追加してみました：

$(document).ready(function() {
  var desiredHeight = $("body").height() - $("head").height() - $("footer").height();
  $(".yui3-u-3-5").css("min-height", desiredHeight );
});​

しかし、これは機能しませんでした。コンテンツが実際のブラウザー ウィンドウよりも高い場合、スクロールバーを表示する内側の div を使用して固定ヘッダーとフッターを取得するにはどうすればよいですか?

4

1 に答える 1

1

このようなことをしようとしていますか？http://jsfiddle.net/RiderSargent/sjUBQ/4/

右下のペインの高さを変更して、希望どおりに動作するかどうかを確認してください。キー（あなたが正しくやろうとしていることを理解している場合）はposition: fixed;、ヘッダーとフッターに使用することだと思います。また、メインdivの上部と下部の余白を、それぞれヘッダーとフッターの高さに設定したのと同じ寸法に設定することもできます。

編集：すべてが表示されていることを確認するために、lorumipsumに「BEGIN」と「END」を入れました。

編集＃2：更新されたjsFiddle： http: //jsfiddle.net/RiderSargent/sjUBQ/5/

編集＃3：要するに、これはあなたが必要とするjQueryだと思います：

var headerHeight = $('#head').height(),
    footerOffset = $('#footer').offset().top,
    desiredHeight = footerOffset - headerHeight;

$('.yui3-u-3-5').css('height', desiredHeight);
于 2012-05-03T20:00:47.823 に答える