iFrame 100% chiều cao khiến thanh cuộn dọc

Tôi thấy rất nhiều câu hỏi về iFrames chiều cao 100% nhưng không có ai dường như có cùng một vấn đề chính xác như tôi.iFrame 100% chiều cao khiến thanh cuộn dọc

Điều tôi muốn làm là có iFrame bao phủ toàn bộ chế độ xem, không có thanh cuộn, không có cài đặt tràn: ẩn trên cơ thể.

Tôi nhận được lề dưới 5px vào iFrame của tôi sẽ không biến mất với css, và nó gây ra một scroolbar dọc. Lời khuyên tiêu chuẩn dường như là thiết lập tràn: ẩn trên cơ thể, nhưng điều đó không thực sự giải quyết được vấn đề, và nó không đủ cho tôi.

Đây là siêu đơn giản jsFiddle example. (thông báo thanh cuộn dọc đôi)

Hành vi này giống nhau trong Chrome 15, IE9 và FF9 đối với tôi.

Nguồn

2012-02-03 Per Salbark

Nó không phải là iframe sản xuất các thanh cuộn, đó là khoảng trắng sau khi nó

<iframe src="http://www.bbc.co.uk" frameborder="0"></iframe> 
    <!-- Whitespace here; This is being rendered! --> 
</body>

Nếu bạn không muốn nhìn thấy nó, sử dụng

* { line-height: 0; }

chỉnh sửa: Tắt vấn đề vẫn tồn tại nếu bạn xóa khoảng trắng, nhưng giải pháp là như nhau. Iframe được hiển thị dưới dạng nội tuyến theo mặc định (iframe = 'inline frame') và do đó có chiều cao dòng gây ra sự cố. Bạn có thể muốn thử iframe { display: block; } hoặc kết hợp cả hai giải pháp.

Nguồn

2012-02-03 16:04:31 user123444555621

Trong Chrome, khi tôi nhấp chuột phải vào khoảng trắng và chọn ** Kiểm tra phần tử **, phần tử 'HTML' bên trong' IFRAME' được chọn trong tab ** Các thành phần **. Tôi đã thêm ảnh chụp màn hình vào câu trả lời của mình. –

@davegrove Không chắc liệu thanh tra có chính xác 100% không. – user123444555621

Đã thử trong hai trình duyệt khác (Firefox và IE) và kiểm tra các yếu tố nổi bật giống nhau. Hãy thử nó, nó làm nổi bật điều gì cho bạn? –

Cập nhật:

dụ làm việc trong chrome 16.0.*, firefox 10.* (rõ ràng ie9 với hành vi lập và hiển thị một thanh cuộn một trong hai cách - hoặc một khuyết tật nếu chiều cao được thiết lập đến 99% hoặc một hoạt động mà không thể di chuyển nếu chiều cao là 100%):

nơi sau đây trong một tập tin html và mở nó (không biết những gì jsfiddle đang làm khác nhau, nhưng nó không hoạt động theo cùng một cách)

<style> 
* { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    /*overflow: auto;*/ /* not needed, this is the default value*/ 
} 
</style> 
<iframe src="http://www.bbc.co.uk" frameborder="0"/>

Nguồn

2012-02-03 13:21:14 Bogdan

Cảm ơn, nhưng đó không thực sự là điều tôi muốn. Có lẽ tôi không rõ ràng trong câu hỏi của tôi. Tôi muốn iFrame chiếm toàn bộ chiều cao khung nhìn (và chiều rộng, nhưng điều đó thật dễ dàng). Giải pháp của bạn không làm điều đó. Tôi sẽ tiếp tục và chỉnh sửa câu hỏi của mình để người khác không hiểu sai ý kiến. –

Không hoạt động trên Firefox 9.0.1 tại đây. –

k, tôi sẽ điều tra – Bogdan

không nhìn thấy thanh cuộn dọc ngoài của jsFiddle với điều này:

<html> 
<head> 
<style> 
body { 
    padding: 0; 
    margin: 0; 
} 

iframe { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
} 
</style> 
</head> 
<body> 
    <iframe src="http://www.bbc.co.uk" frameborder="0"/> 
</body> 
</html>

EDIT: Dưới đây là một đoạn trích từ dưới Elements tab của những gì được chọn khi tôi kiểm tra việc trắng-không gian trong Chrome.

Developer Tools Snip

Nguồn

2012-02-03 13:25:46

Vâng, xin lỗi vì không đủ rõ ràng. Se nhận xét khác của tôi và những thay đổi của tôi cho câu hỏi. –

Ermm :-), tôi không chắc tại sao điều này không phù hợp với hóa đơn. Tôi đã tinh chỉnh câu trả lời của mình để đặt chiều rộng và bao gồm nguồn cho 'iframe'. Bản thân 'iframe' lấp đầy toàn bộ khung nhìn và không có bộ kiểu' overflow' trên tài liệu chứa. –

Tôi nghĩ khoảng cách '5px' mà bạn nhìn thấy thuộc về tài liệu chứa trong' iframe'. Tôi có thể xác nhận điều này, nếu bạn nhấp chuột phải vào khoảng trống trong Chrome và chọn ** Kiểm tra phần tử ** bạn có thể xem cho chính mình. –

Để tóm tắt nó:

khoảng trắng trước khi nguyên nhân 4px khoảng trắng ở rigth của iframe.
khoảng trắng sau csuses 4px khoảng trắng sau iframe.

Điều này là do ký tự nội tuyến của khung nội tuyến như được chỉ ra trong bài đăng đầu tiên.

Nguồn

2012-06-12 08:53:59 Poisson

Để ngăn chặn các thanh cuộn thử điều này:

CSS:

html, body { height:100%; margin:0;} 
.bdr { border: thick solid grey } 
.h100 { height:100%;} 
.w100 { Width: 100% } 
.bbox { box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
     } 
.vat { font-size: 0; vertical-align:top}

HTML:

<body class="bbox"><!-- no WS here--><iframe  
      class="bdr h100 w100 vat bbox" name="iframe1" 
      src="http://www.bbc.co.uk"> </iframe><!--no WS here either--></body>

Phong cách .bbox ngăn divs phụ từ phát triển. .Vat là cần thiết cho IE và Firefox. Một thay thế cho .vat là: display: block. Hoặc display: inline-block + vertical-alignment: top .brd dùng cho mục đích trình diễn.

Nguồn

2012-06-13 16:36:26 poisson

iFrame 100% chiều cao khiến thanh cuộn dọc

Trả lời

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