ブラウザのウィンドウと位置を絶対にサイズ変更してスクロールする

以下のデモhtml/cssを使用して、私はウィンドウの再配置に奇妙な問題を抱えています。ブラウザのウィンドウと位置を絶対にサイズ変更してスクロールする

編集：

enter image description here

#mainContentディスプレイは、スクロールバーをように、十分なウィンドウのサイズを変更：ここではスクリーンショットです。
本体のスクロールバーを使用してください（メインの右のスクロールバーではなく、メインのスクロールバーです）。ページの下部までスクロールしてください。
#mainContentがスクロールしながらページのサイズを変更して埋め込むことを望んでいましたが、同じサイズのままなので、空白の領域が埋められます。

これには唯一の救済策がありますか、いくつかのjavascriptが必要ですか？

私はリスト上のこの解決策を見ましたthis solution on A List Apart。しかし、それは身体のスクロールバーを隠すので、本当に私を助けません。

CSS：

#sideBar { 
    left: 5px; 
    overflow: auto; 
    position: absolute; 
    right: 5px; 
    top: 0px; 
    width: 235px; 
    border: 1px solid black; 
    height: 5000px; /*silly value just to ensure that scroll bar is visible*/ 
} 

#mainContent 
{ 
    position: absolute; 
    right: 5px; 
    top: 0px; 
    bottom: 0px; 
    left: 250px; 
    overflow: auto; 
    padding: 10px; 
    border: 1px solid black; 
}

HTML：anyhelpためindvance

 
<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="test2.css"/> 
</head> 
<body> 
    <div id="sideBar"> 
     <ul><li>Nav</li> 
     </ul> 
    </div> 
    <div id="mainContent"> 
     <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p> 
    </div> 
</body>

感謝。

出典

2012-02-07 bplus

イムないあなたが達成しようとしているのかわからを使用します。しかしあなたの "愚かな価値"を試してみてください。 –

応答してくれてありがとう - 自分の問題を説明するために元の投稿にスクリーンショットを追加しましたが、これは役に立ちますか？ – bplus

試行の高さ：100％; –

私はあなたが望む機能を完全に理解しているかどうかはわかりません。

しかし、あなたが#maincontentをposition：fixedに変更したいと思っていることから、

http://jsfiddle.net/MY7fY/

#sideBar { 
    left: 5px; 
    overflow: auto; 
    position: absolute; 
    right: 5px; 
    top: 0px; 
    width: 235px; 
    border: 1px solid black; 
    height: 5000px; /*silly value just to ensure that scroll bar is visible*/ 
} 

#mainContent 
{ 
    position: fixed; 
    right: 5px; 
    top: 0px; 
    bottom: 0px; 
    left: 250px; 
    overflow: auto; 
    padding: 10px; 
    border: 1px solid black; 
}

出典

2012-02-07 14:50:35 Jason

応答してくれてありがとう - 私が達成しようとしているものとまったく同じではない、あなたが提案した固定値を試したので、何が起きているのかを試してみるために元の投稿にスクリーンショットを追加しました。うまくいけば、これは役に立ちます。 – bplus

次のCSS

body { 
     height: 100%; 
     padding: 0; 
     margin: 0; 
    } 

#mainContent { 
    height:100%; 
    ... 
    }

出典

2012-02-08 11:03:14

ブラウザのウィンドウと位置を絶対にサイズ変更してスクロールする

答えて

関連する問題