Tại sao vw lại bao gồm thanh cuộn như một phần của khung nhìn?

Question

Tôi đang cố gắng xây dựng một trang web có nhiều hộp có chiều rộng và chiều cao bằng nhau. Ví dụ: tôi có một trang có 2 hộp kích thước bằng nhau cạnh nhau.

Giải pháp đơn giản là đặt chiều rộng và chiều cao thành 50vw. Điều này làm việc tuyệt vời cho đến khi có một thanh cuộn. Tôi đã Googled xung quanh trong nhiều giờ và không thể hiểu tại sao trên trái đất vw và vh sẽ bao gồm các thanh cuộn như một phần của khung nhìn.

Dưới đây là một ví dụ về vấn đề của tôi

HTML

<div class="container"> 
    <div class="box red"></div> 
    <div class="box green"></div> 
</div> 
<div class="lotta-content"></div> 

CSS

body { 
    margin: 0; 
    padding: 0; 
} 

.container { 
    width: 100vw; 
} 

.box { 
    float: left; 
    width: 50vw; 
    height: 50vw; 
} 

.red { 
    background-color: red; 
} 

.green { 
    background-color: green; 
} 

.lotta-content { 
    height: 10000px; 
} 

Thông báo thanh cuộn ngang không mong muốn

https://jsfiddle.net/3z887swo/

Một giải pháp có thể là sử dụng tỷ lệ phần trăm cho chiều rộng, nhưng vw cho chiều cao, nhưng nó sẽ không bao giờ là một hộp hoàn hảo mà không phải là điều tồi tệ nhất trên thế giới, nhưng vẫn không lý tưởng. Đây là một mẫu

https://jsfiddle.net/3z887swo/1/

Có ai biết tại sao vw/vh bao gồm thanh cuộn như một phần của khung nhìn? Ngoài ra, nếu ai đó có một giải pháp tốt hơn của riêng tôi, tôi rất muốn nghe nó. Tôi đang tìm một giải pháp CSS tinh khiết. Tôi không có javascript.

Answer 1

Sẽ thuận tiện nếu đơn vị khung nhìn không bao gồm thanh cuộn nhưng sau cùng là kích thước màn hình (màn hình). Đã nhìn vào giải pháp này với một yếu tố giả mặc dù:

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Làm cho một hình vuông trong ví dụ của bạn cũng như:

https://jsfiddle.net/3z887swo/4/

.box { 
    float: left; 
    width: 50%; 
} 

.box::before { 
    content: ""; 
    display: block; 
    padding-top: 100%; 
} 

Edit - nếu có ai là tự hỏi tại sao điều này công trình (đệm dọc đáp ứng chiều rộng của phần tử gốc) ... về cơ bản nó được định nghĩa như thế nào trong đặc điểm kỹ thuật:

Tỷ lệ phần trăm được tính theo chiều rộng của khối chứa ô đã tạo, ngay cả đối với 'padding-top' và 'padding-bottom'.

http://www.w3.org/TR/CSS2/box.html#padding-properties

Answer 2

Tôi có một câu trả lời khác nhau, và cảm thấy cần phải chia sẻ sự thất vọng của tôi

VÌ TIÊU CHUẨN định ngu ngốc

(ủy ban, nói chung, luôn có những)

Một giải pháp đơn giản là giữ thanh cuộn luôn quanh và được xử lý với nó

html,body {margin:0;padding:0} 
html{overflow-y:scroll} 

(sử dụng overflow-x cho một bố trí sử dụng vh)

Tôi tin rằng họ nghiêm túc screwed chú chó trên thế này.

Answer 3

html { overflow-x: hidden; } 

dường như làm việc