Làm cho hai div chia sẻ cùng một thanh cuộn?

Question

Với hai div đại diện cho các cột được nhúng trong một div lớn hơn. Nếu html "! Stuff" đại diện cho nhiều hàng dữ liệu sẽ vượt quá chiều cao của vùng chứa, làm cách nào để thiết lập nó để hai col div sẽ tràn và chia sẻ một thanh cuộn từ "vùng chứa"?

 

.container { 
    height: 100%; 
    width: 100%; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    position: relative; 
    padding-bottom: 30px; 
} 

.col1 { 
    height: 100%; 
    width: 50%; 
    overflow-x: hidden; 
    overflow-y: visible; 
    position: relative; 
    float: left; 
} 

.col2 { 
    height: 100%; 
    width: 50%; 
    overflow-x: hidden; 
    overflow-y: visible; 
    position: relative; 
    float: right; 
} 

<div class="container"> 
    <div class="col1"> 
    !Stuff<br/> 
    </div> 

    <div class="col2"> 
    !Stuff 
    </div> 
</div> 

Answer 1

Bạn cần phải thiết lập chiều cao cố định cho container, nếu không nó sẽ tự động thay đổi kích cỡ để các cột divs phù hợp bên trong. Thuộc tính overflow chỉ nên được thiết lập cho các container, vì nó là yếu tố duy nhất mà sẽ được cuộn:

.container { 
    height: 300px; 
    width: 100%; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    position: relative; 
    padding-bottom: 30px; 
} 

.col1 { 
    height: 100%; 
    width: 50%; 
    position: relative; 
    float: left; 
} 

.col2 { 
    height: 100%; 
    width: 50%; 
    position: relative; 
    float: right; 
}