Tôi đang cố gắng sử dụng các đơn vị CSS vh bên trong iframe. Tôi thấy rằng chúng được thu nhỏ kích thước của iframe bằng cách nào đó. Nói cách khác, 100vh không phải là windowheight. Nó được đặt ở độ cao của khung nội tuyến.Đơn vị vh CSS bên trong iframe
Điều này có đúng không?
Có cách giải quyết khác không?
Tôi biết đây là một câu hỏi cũ, nhưng khi mọi người di chuyển về phía đơn vị vh, câu hỏi này sẽ trở nên phổ biến hơn.
Để làm rõ, đây là ví dụ về sự cố. Chúng tôi có một tập tin HTML mà tải một iframe:
<!DOCTYPE html>
<html>
<head></head>
<style>
iframe {
height: 50vh;
width: 100%;
}
</style>
<body>
<iframe src="iframe.html"/>
</body>
</html>
Và iframe của nó:
<!DOCTYPE html>
<html>
<head></head>
<style>
div {
height: 50vh;
width: 100%;
background: blue;
}
</style>
<body>
<div></div>
</body>
</html>
Điều quan trọng cần lưu ý ở đây là cả hai iframe và các yếu tố iframe'sdiv được chỉ định là có một chiều cao của 50vh. Hành vi dự định có thể là iframe tôn trọng chiều cao hoặc chiều rộng của chế độ xem của bối cảnh gốc. Thay vào đó, kết quả sẽ như thế này:
Đó là, chiều cao của các yếu tố màu xanh là ~ 25% của cửa sổ trình duyệt, thay vì dự kiến 50% (100% iframe). Mặc dù chúng tôi có thể muốn iframe tôn trọng chế độ xem của cha mẹ, ví dụ này tạo ra một trường hợp tốt cho cách không trực quan, mặc dù nó chắc chắn sẽ làm cho đơn vị v* có giá trị hơn đối với nội dung là iframe. với chiều cao khung nhìn được xác định như thế nào.
Từ the spec:
Chiều dài viewport-tỷ lệ có liên quan đến kích thước của đầu chứa khối. Khi chiều cao hoặc chiều rộng của khối chứa ban đầu được thay đổi, chúng được thu nhỏ cho phù hợp.
Cả hai iframe và cửa sổ trình duyệt có thể là initial containing block, vì cả hai chế độ xem hợp lệ. Chế độ xem không giới hạn ở cửa sổ trình duyệt, nhưng thay vào đó được xác định là cửa sổ hoặc khu vực xem khác trên màn hình mà qua đó người dùng tham khảo tài liệu.
An iframe tạo nested browsing context khi được chèn vào tài liệu và do đó có chế độ xem riêng.
Vì vậy, có, đây là hành vi dự định - và tiếc là không có cách giải quyết CSS thuần túy - tuy nhiên, www139 đã cung cấp ví dụ về cách thực hiện điều này bằng JavaScript. Vấn đề với điều này bắt đầu khi kích thước của nhiều yếu tố được kiểm soát bằng cách sử dụng đơn vị v*.
Đây là một câu hỏi hay. Đáng buồn thay, tôi đã không thể tìm ra một giải pháp trong CSS nhưng tôi đã có thể tìm ra một giải pháp trong JavaScript mà tôi nghĩ là đặt cược tốt nhất của bạn vào lúc này. Hãy nhớ rằng các khung phải nằm trên cùng một miền để làm việc này.
Hy vọng điều này sẽ hữu ích. Nếu câu trả lời này cần cải thiện, hãy bình luận dưới đây :-)
window.addEventListener('load',function(){
initializeV();
function initializeV(){
//1% of the parent viewport width (same as 1vw):
var vw = window.parent.innerWidth/100;
//1% of the viewport height (same as 1vh):
var vh = window.parent.innerHeight/100;
//assign width and height to your v unit elements here
}
window.parent.addEventListener('resize',function(){
//when the browser window is resized; recalculate
initializeV();
});
});
@JamieCounsell \t "// chỉ định chiều rộng và chiều cao cho các phần tử v của bạn ở đây" nghĩa là gì? Làm thế nào để làm điều đó? Bạn có thể vui lòng cung cấp một ví dụ? Cảm ơn –
@SamGurdus đó là nơi các thuộc tính CSS được đặt bằng JavaScript. Ví dụ, 'document.getElementById (" test ") style.width = 10 * vw + 'px';' sẽ thiết lập chiều rộng của phần tử #test thành 10% (hoặc 10vw) chiều rộng của khung nhìn. – www139
Tôi có iframe khác trong iframe và tôi nghĩ điều này đang vi phạm. Đây là mã của iframe chính. https://jsfiddle.net/samgurdus/o3vkhp5o/ –
sử dụng javascript cho việc này. Kiểm tra 'window.innerWidth' và' window.innerHeight'. – www139
Khung nội tuyến trên cùng một tên miền? – www139
Bạn có thể tạo một jsfiddle cho chúng tôi không? – www139