Có thể tính chiều rộng khung nhìn (vw) không có thanh cuộn không?

Question

Như đã đề cập trong tiêu đề, có thể tính toán vw mà không có thanh cuộn chỉ trong css không?

Ví dụ: màn hình của tôi có chiều rộng là 1920px. vw trả lại 1920px, tuyệt vời. Nhưng chiều rộng cơ thể thực tế của tôi chỉ là một cái gì đó giống như 1903px.

Có cách nào để tôi lấy giá trị 1903px chỉ với css (không chỉ cho trẻ em trực tiếp của body), hay tôi hoàn toàn cần JavaScript cho điều này?

Answer 1

Theo the specs, đơn vị độ dài tương đối chế độ xem không lấy thanh cuộn vào tài khoản (và trên thực tế, giả sử rằng chúng không tồn tại).

Vì vậy, bất kể hành vi mong muốn của bạn là gì, bạn không thể xem xét thanh cuộn khi sử dụng các đơn vị này.

Answer 2

Trình duyệt webkit loại trừ các thanh cuộn, bao gồm các thanh cuộn khác trong chiều rộng được trả lại. Điều này tất nhiên có thể dẫn đến các vấn đề: ví dụ nếu bạn có nội dung được tạo theo thực tế với ajax thêm chiều cao một cách tối ưu, Safari có thể chuyển từ bố cục này sang bố cục khác trong khi hiển thị trang ... Ok, nó không xảy ra thường xuyên, nhưng một cái gì đó để được nhận thức về. Trên thiết bị di động, ít sự cố hơn, khiến thanh cuộn thường không được hiển thị.

Đó là nói, nếu vấn đề của bạn là tính toán exacly chiều rộng khung nhìn mà không thanh cuộn trong tất cả các trình duyệt, như xa như tôi biết, một phương pháp tốt là thế này:

width = $('body').innerWidth(); 

khi trước đây thiết lập:

body { 
    margin:0; 
    } 

Answer 3

Một cách để làm điều này là với calc. Theo tôi biết, 100% là chiều rộng bao gồm cả thanh cuộn. Vì vậy, nếu bạn làm:

body { 
    width: calc(100vw - (100vw - 100%)); 
} 

Bạn nhận được 100vw trừ đi chiều rộng của thanh cuộn.

Bạn có thể làm điều này với chiều cao là tốt, nếu bạn muốn có một hình vuông đó là 50% của khung nhìn ví dụ (trừ 50% chiều rộng scollbar)

.box { 
    width: calc(50vw - ((100vw - 100%)/2)) 
    height: 0 
    padding-bottom: calc(50vw - ((100vw - 100%)/2)) 
} 

Answer 4

Đơn vị vw không lấy overflow-y thanh cuộn vào tài khoản khi overflow-y được đặt thành auto.

Thay đổi thành overflow-y: scroll; và đơn vị vw sẽ là chế độ xem không có thanh cuộn.

Nhược điểm duy nhất để tính đến. Nếu nội dung vừa với màn hình, thanh cuộn sẽ được hiển thị. Giải pháp có thể thay đổi từ auto thành scroll trong javascript.