Изменение размера, а затем прокрутка окна браузера и абсолютного положения

Использование демонстрационного html/css ниже. У меня возникает странная проблема с изменением окна.Изменение размера, а затем прокрутка окна браузера и абсолютного положения

Edit: Вот снимок экрана:

enter image description here

Изменение размера окна достаточно так что #mainContent отображает полосы прокрутки.
Теперь используйте полосу прокрутки тела (правая рука с правой стороны - нет # основной полосы прокрутки) и прокрутите страницу вниз.
Я надеялся, что #mainContent изменит размер и заполнит страницу, пока мы прокрутим вниз, но это не так, она остается того же размера, поэтому я получаю пустую область, которая не заполнена.

Есть ли только css только для этого или мне нужен 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:

 
<!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>

Благодаря indvance для anyhelp.

источник

2012-02-07 bplus

Im не уверен, что вы пытаетесь достичь; но по вашему «глупому значению» попробуйте переполнение-y: прокрутить; –

Спасибо, что ответили - я добавил скриншот к моему оригинальному сообщению, чтобы помочь объяснить мою проблему, помогает ли это? – bplus

высота: 100%; –

Я не уверен, что полностью понимаю, какие именно функции вы хотите.

Но из того, что я понимаю, вы хотите изменить #maincontent на позицию: исправлено.

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

Изменение размера, а затем прокрутка окна браузера и абсолютного положения

ответ

Смежные вопросы