Родительский прокручиваемый div, дочерний div unscrollable?

Question

Возможно ли иметь родительский div с возможностью прокрутки (переполнение: авто), но дочерний div не может быть просканирован? Нет. Я не могу использовать «position: fixed», потому что это исправляет его в окне просмотра. Мне нужно установить дочерний div в родительский div. Пример

Код:

#pagecontainer { 
    overflow:auto; 
    width:1000px; 
    height:450px; 
} 
#pagecontainer>div{ /*each of the pages*/ 
    margin-top:50px; 
    padding-left:50px; 
    padding-right:50px; 
    position:relative; 
} 
.unscrollable{ 
    position:absolute; 
    width: 250px; 
} 
.scrollable{ 
    margin-left:300px; 
    float:left; 
} 

HTML

<div id="pagecontainer"> 

    <div id="page1"> 

     <div class="unscrollable"> <!--UNSCROLLABLE--> 
      <a href="#page1" class="link">Link 1</a> 
      <p> 
      <a href="#page2" class="link">Link 2</a> 
      <p> 
      <a href="#page3" class="link">Link 3</a> 
      <p> 
      <a href="#page4" class="link">Link 4</a> 
      <p> 
     </div> 

     <div class="scrollable"> <!--SCROLLABLE--> 
      content content content 
     </div> 

    </div> 

    <div id="page2"> 

     <div class="unscrollable"> <!--UNSCROLLABLE--> 
      <a href="#page1" class="link">Link 1</a> 
      <p> 
      <a href="#page2" class="link">Link 2</a> 
      <p> 
      <a href="#page3" class="link">Link 3</a> 
      <p> 
      <a href="#page4" class="link">Link 4</a> 
      <p> 
     </div> 

     <div class="scrollable"> <!--SCROLLABLE--> 
      content content content 
     </div> 

    </div> 

</div> 

Я не могу сделать только ребенок ДИВ .scrollableoverflow:auto (что на самом деле будет исправить .unscrollable), потому что тогда будет полоса прокрутки имеет 50px разрыв из-за поля 50px, и он будет прокручиваться только относительно. scrollable. Мне нужна полоса прокрутки на #pagecontainer, или #page1/#page2 тоже хорошо.

Также я не могу поставить .unscrollable за пределами #pageX. Мне нужен код, который будет организован, .unscrollable - это раздел каждой страницы. Если я ставлю .unscrollable вне #pageX, то мне нужно создать идентификатор для unscrollable для каждой страницы, т.е. #unscrollable1#unscrollable2, то позвоните по телефону (#page1, #unscrollable1) .fadeIn(), когда я хочу, чтобы показать эту страницу, а не просто (#page1). FadeIn(). Это будет невероятно беспорядочно. Таким образом, нижняя строка - это структура divs не может быть изменена.

Что мне нужно некоторые JavaScript/JQuery функция, которая делает .unscrollable крепится к #pagecontainer или #page1/#page2 перезаписывает любой CSS, что-то вроде (.unscrollable) .fixTo (#pagecontainer), если это существует.

Answer 1

Чтобы исправить ребенка к родителю div, попробуйте использовать position: relative на родителе div и position: fixed на ребенка div.

Тогда все позиционировании вы делаете с ребенком div (top, bottom, left и right) будет относительно родителя div.

Answer 2

Я создал jsfiddle, показывая одно возможное решение. http://jsfiddle.net/SF7nr/

Я удалил плавающий для прокручивать и установить max-height и overflow: auto; активировать прокрутку.

По соображениям компоновки я также установил минимальную высоту для самой страницы. Проверьте это.