如何使兩個滾動如果溢出div在一個固定的容器內？

這裏是我的JSfiddle https://jsfiddle.net/tan3j6ja/2/如何使兩個滾動如果溢出div在一個固定的容器內？

我試圖做一個頁面封裝，是固定的兩個div內的滾動內容隱藏時。即使內容被隱藏，它也不會滾動。

編輯：我希望他們獨立滾動。

.page-wrap { 
background-color: #fff; 
margin: auto; 
margin-top: 60px; 
width: 500px; 
position: fixed; 
bottom: 0; 
left: 0; 
right: 0; 
top: 20px 
} 

.grid { 
display: flex; 
align-items: flex-start; 
} 

.is-half-1 { 
    width: 50%; 
    background-color: yellow; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

.is-half-2 { 
    width: 50%; 
    background-color: blue; 
    overflow-y: scroll; 
    overflow-x: hidden; 
}

來源

2016-08-05 Kris Jones

我相信你需要爲你的兩個div設置一個高度，以便它們正確滾動。因爲在您提供的JSFiddle中，它們的高度設置爲auto，因爲它們與它們內部的內容一樣高。 – Quiver

這是由於您沒有設置實際高度，所以溢出不知道實際上滾動。向兩個div添加像素高度解決了問題。

.page-wrap { 
 
    background-color: #fff; 
 
    margin: auto; 
 
    margin-top: 60px; 
 
    width: 500px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    top: 20px 
 
} 
 

 
.grid { 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 

 
.is-half-1 { 
 
    width: 50%; 
 
    height: 300px; 
 
    display: block; 
 
    background-color: yellow; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
} 
 

 
.is-half-2 { 
 
    width: 50%; 
 
    height: 500px; 
 
    display: block; 
 
    background-color: blue; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
} 
 

 
.small-container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    padding: 10px; 
 
} 
 

 
.field-input { 
 
    width: 100%; 
 
    margin: 5px 0; 
 
    padding-left: 3px; 
 
    font-size: 15px; 
 
    height: 26px; 
 
} 
 

 
li { 
 
    width: 100%; 
 
    display: block; 
 
}

<div class="page-wrap"> 
 
    <div class="grid"> 
 
    <div class="is-half-1"> 
 
     <h1>Search</h1> 
 
     <input class="field-input" /> 
 
     <input class="field-input" /> 
 
     <input class="field-input" /> 
 
     <input class="field-input" /> 
 
     <input class="field-input" /> 
 
     <input class="field-input" /> 
 
     <input class="field-input" /> 
 
     <input class="field-input" /> 
 
     <input class="field-input" /> 
 
     <input class="field-input" /> 
 
    </div> 
 
    <div class="is-half-2"> 
 
     <div class="small-container"> 
 
     <h1>Results</h1> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     <li>Result</li> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-08-05 14:43:08 Trasiva

隨着Trasiva的解決方案的幫助下，我找到了一種方法，使讓它滾動到列表的末尾，並使其在窗口底部切斷，使窗口可以是任何高度。我把位置：絕對滾動div和高度設置爲100％。

來源

2016-08-05 15:13:47

如何使兩個滾動如果溢出div在一個固定的容器內？

回答

相關問題