2011-12-08 26 views
6

Tôi có một div và div đó có chiều cao là 200px. Bên trong div có văn bản và tôi không muốn div có scrollbars do đó tôi đã thiết lập overflow: hidden.Tràn một danh sách bên trong một div bị tràn: ẩn

Bây giờ, bên trong div đó cũng có một danh sách, hoạt động như một hộp thả xuống. Khi bạn nhấp vào hộp danh sách/thả xuống, tôi muốn nó xuất hiện trên TOP của div chính.

Dưới đây là một ví dụ với div chính để tràn: ẩn:

enter image description here

Và đây là một ví dụ mà không overflow: hidden. Vì vậy, tôi muốn như sau nhưng văn bản không tràn.

enter image description here

jsFiddle: http://jsfiddle.net/w8kQA/

+2

1 câu hỏi hay, tôi đã chạy vào trong này trước và không bao giờ đào đủ sâu để tìm hiểu. Luôn luôn làm một công việc xung quanh nó (như vị trí tuyệt đối một yếu tố trên hộp, vv;) – Jakub

+0

Nó đã được vị trí tuyệt đối ... – jQuerybeast

+0

Điều quan trọng là sử dụng danh sách thả xuống bên trong hộp này? Bạn nghĩ gì về danh sách thả xuống với vị trí tuyệt đối, nhưng không phải bên trong hộp này? – tildy

Trả lời

2

Bạn có thể thiết lập các overflow: hidden vào các yếu tố bên trong hộp, thay vì trên thân hộp:

http://jsfiddle.net/w8kQA/1/

+2

Câu trả lời hay. Bạn có thể thay đổi chiều cao thành 'height: inherit' trong' p' để đóng gói nó nhiều hơn một chút. Điều này sẽ yêu cầu bạn thay đổi danh sách thành 'vị trí: tuyệt đối' mặc dù: http://jsfiddle.net/w8kQA/5/ –

1

Trong các ý kiến ​​trên , bạn đề cập rằng bạn có 20 hộp bên trong một div.

Nếu trường hợp đó xảy ra thì tôi sẽ quấn #box.list bên trong số holder div. Bằng cách đó bạn có thể đạt được bố cục của mình và vẫn có nhiều hộp trong div.

JSFiddle: http://jsfiddle.net/w8kQA/2/

+0

Tôi thích câu trả lời của bạn trên nhận xét của ptriek vì vậy – jQuerybeast

+0

Không sao cả :) Tôi thích câu trả lời của anh ấy hơn tôi thêm một cải tiến nhỏ cho nó –

Các vấn đề liên quan