Kéo dài khung nội tuyến trong HTML5

Tôi có hai tệp html, một tệp chứa một iframe khác và tôi muốn làm khung nội tuyến này trải dài trên toàn bộ chiều cao của html gốc.Kéo dài khung nội tuyến trong HTML5

Vì vậy, các tập tin html đầu tiên (trong đó có một nền đỏ) trông giống như:

<!DOCTYPE html> 
<html> 
<body style="background-color: red; margin: 0px; padding: 0px;"> 
    <iframe src="Blue.html" frameborder="0" scrolling="no" height="100%" width="100%" /> 
</body> 
</html>

Thứ hai (trong đó có một nền màu xanh):

<!DOCTYPE html> 
<html>  
<body style="background-color: blue;" /> 
</html>

Nếu mọi sự đều đúng tôi mong đợi để chỉ xem một nền màu xanh lam, vì khung nội tuyến nên chồng chéo lên toàn bộ trang gốc, nhưng tôi chỉ thấy một dải màu xanh và rất nhiều màu đỏ ..

Với HTML5 doctype <!DOCTYPE html> Tôi dường như không thể nhận được kết quả chính xác:

With HTML5 DOCTYPE

Nếu tôi loại bỏ các loại tài liệu HTML5 tôi nhận được kết quả tôi muốn. Tôi nghĩ rằng đây là bởi vì nó sẽ làm cho HTML trong chế độ quirks:

Without HTML5 DOCTYPE

tôi làm muốn DOCTYPE HTML Mặc dù vậy, vậy làm thế nào tôi có thể sửa lỗi này? Cảm ơn bạn đã tìm kiếm!

Nguồn

2011-08-10 Arcturus

tôi đang làm điều đó với tôi [W3 Viewer] (http://w3viewer.com). Bí quyết là đặt IFRAME vào một DIV. Sau đó, vị trí DIV hoàn toàn để nó bao gồm toàn bộ trang, và thiết lập 'chiều rộng: 100%; chiều cao: 100%; 'trên IFRAME. –

CSS:

#wrap { position:fixed; left:0; width:100%; top:0; height:100%; } 
#iframe { display: block; width:100%; height:100%; }

HTML:

<div id="wrap"> 
    <iframe src="..." frameborder="0" id="iframe"></iframe> 
</div>

Live Demo:http://jsfiddle.net/5G5rE/show/

Nguồn

2011-08-10 13:39:44

Bạn có thể giải thích tại sao vấn đề này xảy ra và cách vị trí: khắc phục được sự cố? Cảm ơn bạn! – Jay

@Jay OP đã đặt chiều cao của IFRAME thành 100%. Tỷ lệ phần trăm này liên quan đến khối chứa - trong trường hợp này là phần tử BODY. Tuy nhiên, chiều cao của phần tử BODY, theo mặc định, phụ thuộc vào chiều cao của nội dung. Đây là phụ thuộc vòng tròn - chiều cao của BODY phụ thuộc vào chiều cao của IFRAME và ngược lại. Điều này sẽ không làm việc, rõ ràng. Người ta có thể đặt chiều cao của cả phần tử BODY và HTML thành 100% - điều đó có thể hoạt động. Tôi thích vị trí cố định - nó linh hoạt hơn (người ta có thể xác định cả vị trí và kích thước chính xác). –

Cảm ơn bạn Šime Vidas đã giải thích! – Jay

Kéo dài khung nội tuyến trong HTML5

Trả lời

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