jquery - div のスクロールバーが正しく表示されない (移動する)

Question

写真に示されているように、スクロールバーがずれています。理由はわかりません..コンテンツdivの高さは、ナビゲーションバーの下部からブラウザウィンドウの最後までです。

短縮されたコードは次のとおりです。

<div id="bar">
   <-- BarContent -->
</div>
<div class="content">
</div>

CSS:

#containerContent .center .content
{
    padding-left: 30px;
    padding-top: 25px;
    padding-right: 30px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 1px;
}

私のdivの高さはjqueryで設定されています

$(document).ready(function () {
    $('#content').height($('#containerContent').height() - $('#bar').height());
}

私は知っています：* jqueryでのサイズ変更の問題ではありません（cssで正しい高さでテストしました）* divは必要なすべてのスペースを取っています

誰かが私のスクロールバーを正しく表示するためのアイデアや解決策を持っていますか?

ありがとう

アップデート

Jeremy Voges のおかげで、このソリューションはクリックして機能します。

しかし、スクロールバーの高さをIEに合わせる可能性はありますか? firefox safariなどは動作します