Cuộn cột độc lập trong trang HTML

Question

Tôi có hai cột trong trang HTML của mình.

<div id="content"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 

Mỗi trong số họ chiếm một nửa số trang

#left { 
    float: left; 
    width: 50%; 
} 

#right { 
    float: left; 
    width: 50%; 
} 

Có thể để làm cho nó để họ chảy một cách độc lập? Ý tôi là, tôi muốn có thể cuộn xuống cột bên trái, nhưng vẫn ở trên cùng của cột bên phải, thay vì phải cuộn xuống cả hai cột cùng một lúc.

Answer 1

See this fiddle

#content, html, body { 
    height: 98%; 
} 
#left { 
    float: left; 
    width: 50%; 
    background: red; 
    height: 100%; 
    overflow: scroll; 
} 
#right { 
    float: left; 
    width: 50%; 
    background: blue; 
    height: 100%; 
    overflow: scroll; 
} 

Answer 2

Có. Bạn sẽ phải hạn chế chiều cao của chúng. See this fiddle để có ví dụ hoạt động.

#content { 
    height: 10em; 
} 
#left { 
    float: left; 
    width: 50%; 
    background-color:#F0F; 
    max-height:100%; 
    overflow: scroll; 
} 

#right { 
    float: left; 
    width: 50%; 
    background-color:#FF0; 
    max-height:100%; 
    overflow: scroll; 
} 

Answer 3

Đặt chiều cao cho các cột và đặt overflow: auto. Bạn cũng có thể đặt tất cả các quy tắc bên trong cùng một bộ chọn CSS. Như thế này:

#left, #right { 
    float: left; 
    width: 50%; 
    height: 200px; /* Set your height here */ 
    overflow: auto; 
} 

Answer 4

Trong đơn giản, viết CSS của bạn theo cách này

#content div{ 
    height: 300px; 
    width:200px; 
    float: left; 
    border:1px solid blue; 
    overflow-y: auto; 
} 

Tham khảo LIVE DEMO

Answer 5

Các tin đăng trước đó được cải thiện một chút:

• 100% html và kích thước cơ thể .... mà không thanh cuộn
• lề cho bên trái và hộp đúng
• cuộn cá nhân chỉ khi cần thiết ("tự động")
• một số chi tiết khác: Thử !

Fiddle: 2 independently scrolling divs

html, body { 
    height: 100%; 
    overflow: hidden; 
    margin: 0; 
} 
#content { 
    height: 100%; 
} 
#left { 
    float: left; 
    width: 30%; 
    background: red; 
    height: 100%; 
    overflow: auto; 
    box-sizing: border-box; 
    padding: 0.5em; 
} 
#right { 
    float: left; 
    width: 70%; 
    background: blue; 
    height: 100%; 
    overflow: auto; 
    box-sizing: border-box; 
    padding: 0.5em; 
}