當父母達到其最大高度時，可滾動的子元素

Question

我有一個顯示錶單的模式窗口。用戶可以單擊按鈕向表單添加新行。隨着每個新行被追加，整個模態窗口的高度應該增加，直到距離視口底部爲50px。從演示

樣品標記：

<div class="parent"> 
    <h4>window title</h4> 
    <a href="#">add new row</a> 
    <section> 
     <h4>content</h4> 
     <p>some random content which never scrolls</p> 
     <ul><li></li></ul> 
    </section> 
    </div> 

我基本上是用絕對定位一個div包含模態窗口

。隨着窗口的增長，它最終會達到這個高度，然後我可以在內容中找到它。

問題是，只有窗體本身應該滾動。隨着每增加一行，窗口的高度就會增加，直到達到父母的高度。在這一點上，只有ul內容應滾動 - 而不是整個模式。

我明白，這可以用JavaScript來實現，但我希望能找到一個純CSS的解決方案，這樣就可以避免在我們的應用程序DOM特定的邏輯，且考慮到視調整事件等

• 溢出-y只適用於容器有最大高度時。因爲我不知道它會是什麼，所以我無法將它列入清單。
• 我可能使絕對定位列表的高度動態，但然後父窗口失去了它的高度，從不調整，當孩子做。

http://jsbin.com/wanipiw/1/edit?html,css,js,output

Answer 1

如果父內容的高度和UL之前，你的部分內容的高度是一致的，基於內容不會是動態的，可以使用最大高度：理論值（100vh - valuePx）允許ul滾動。我還包括一個保證金：0到您的帳戶。

見JSFiddle

$(function() { 
 
    var ul = $('ul'); 
 
    $('a').on('click', function() { 
 
    ul.append('<li></li>'); 
 
    return false; 
 
    }); 
 
})

.parent { 
 
    position: fixed; 
 
    bottom: 56px; 
 
    overflow-y: hidden; 
 
    top: 56px; 
 
    /* demo only */ 
 
    border: 1px solid red; 
 
    left: 50%; 
 
    margin-left: -100px; 
 
    width: 200px; 
 
} 
 
section { 
 
    border: 1px solid blue; 
 
    min-height: 300px; 
 
} 
 
ul { 
 
    padding: 0; 
 
    max-height: calc(100vh - 341px); 
 
    overflow-y: auto; 
 
    margin: 0; 
 
} 
 
li { 
 
    background: #ccc; 
 
    height: 50px; 
 
    margin-top: 10px; 
 
} 
 
li { 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <h4>window title</h4> 
 
    <a href="#">add new row</a> 
 

 
    <section> 
 
    <h4>content</h4> 
 

 
    <p>some random content which never scrolls. the list below should scroll when the section reaches the max height</p> 
 
    <ul> 
 
     <li></li> 
 
    </ul> 
 
    </section> 
 
</div>