Xử lý các thanh cuộn và phương thức jquery .width()

Question

Phương thức .width() của jQuery dường như không giải thích cho các thanh cuộn. Đây là vấn đề đối với tôi, vì tôi muốn thiết lập chiều rộng của một số trẻ em bằng với chiều rộng của bố mẹ chúng. Tôi sử dụng jQuery tương tự như sau:

$('#contentDiv').width($('#containerDiv').width()) 

Trong ví dụ này, #contentDiv là yếu tố tôi muốn kích thước, và tôi muốn đặt nó vào có độ rộng của #containerDiv, đó là yếu tố phụ huynh của nó. Vấn đề của tôi là việc này cắt giảm cạnh của #contentDiv, như được thấy trong this fiddle.

Trong mã thực tế của tôi, tôi cần phải phù hợp với div cuộn, vì vậy chỉ cần thiết lập css của #contentDiv đến 100% không phải là một tùy chọn. Cách tốt nhất để đối phó với độ rộng thanh cuộn của div trong jQuery là gì?

Answer 1

Giải pháp tốt nhất mà tôi tìm thấy trong khi làm việc xung quanh giải pháp này là:

http://chris-spittles.co.uk/?p=531

jQuery là tất cả mạnh mẽ và tất cả mọi thứ nhưng đôi khi một chút nhỏ của JS mẹ đẻ là tất cả các bạn cần phải làm cho điểm ảnh trang hoàn hảo. .. Tôi hy vọng bạn sẽ tìm thấy giải pháp này hữu ích!

Answer 2

CẬP NHẬT:

Không có phương pháp tìm chiều rộng jQuery nào chiếm thanh cuộn. Trong ví dụ ban đầu của tôi, sử dụng .innerWidth(true) LOOKS giống như nó hoạt động, nhưng chỉ vì nó trả về và đối tượng, khiến cho width thất bại và nội dung bên trong kích thước để vừa với không gian sẵn có, bởi vì ví dụ này không tốt lắm. Tuy nhiên, bạn có thể viết một hàm để tính toán không gian sẵn có trong div với thanh cuộn trong đó, sau đó có thể được sử dụng để định vị nội dung theo ý muốn. Để viết chức năng đó, tôi lợi dụng thực tế là, khi div được nối vào div với thanh cuộn trong đó, nó chiếm toàn bộ chiều rộng có sẵn (nghĩa là chiều rộng bên trong của bố mẹ trừ đi chiều rộng của thanh cuộn).

Chức năng trông như thế này:

function noScrollWidth(div){ 
    var measureDiv = $('<div id="measureDiv">'); 

    div.append(measureDiv); 

    var width = measureDiv.outerWidth(); 

    measureDiv.remove(); 

    return width 
}; 

sau đó tôi sử dụng để kích thước div nội dung của tôi:

$('#contentDiv').width(noScrollWidth($('#containerDiv'))); 

Working fiddle.

Answer 3

Hãy thử điều này:

$('#contentDiv').width($('#containerDiv')[0].clientWidth) 

Đối mor e thông tin về giải pháp đó, xem this StackOverflow answer.

Answer 4

Cách tiếp cận khác tôi muốn thử là đặt cả hai thành phần 'box-sizing property thành' border-box 'và xem liệu đặt chiều rộng của contentDiv thành 100% sau đó hoạt động theo cách bạn muốn.

Bây giờ, càng ít dự án lo lắng về các trình duyệt cũ cũ hơn nữa, 'hộp biên giới' có thể giúp mọi việc trở nên dễ dàng hơn. Tuy nhiên, hãy chắc chắn kiểm tra nhiều trình duyệt trên nhiều nền tảng bởi vì tôi không chắc chắn rằng tất cả các trình duyệt đều xử lý thanh cuộn giống nhau.