父div可滾動，子div無法滾動？

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>

我不能僅使子div .scrollable overflow:auto （這確實可以修復.unscrollable ），因為由於50px的邊距，滾動條將具有50px的間隙，並且僅相對於.scrollable滾動。 我需要滾動條位於#pagecontainer ，或者#page1 / / #page2也可以。

我也不.unscrollable #pageX放在.unscrollable之外。 我需要組織代碼， .unscrollable是每個頁面的一部分。 如果我把.unscrollable外#pageX ，那么我需要為unscrollable為每個頁面創建一個ID，即#unscrollable1 #unscrollable2 ，然后調用（ #page1 ， #unscrollable1 ）.fadeIn（）時，我想表明頁面，而不是（ #page1 ）.fadeIn（）的形式。 這將變得令人難以置信。 因此，最重要的是div的結構無法更改 。

我需要的是一些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; 激活滾動。

出於布局原因，我還為頁面本身設置了最小高度。 看看這個。