Tôi đang cố gắng bố trí thiết kế có tiêu đề chiều cao cố định ở đầu màn hình và sau đó khung nội tuyến bên dưới chiếm phần còn lại. Các giải pháp tôi đã đưa ra như sau:iframe 100% height gây ra thanh cuộn dọc
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css"><!-- * {margin: 0;} html, body {height: 100%;width: 100%;margin: 0;padding: 0;}--></style>
</head>
<body>
<div style="height:70px;background-color:blue;"></div>
<div style="position:absolute;top:70px;bottom:0;left:0;right:0;">
<iframe src="http://www.google.com" frameborder="0" style="border:0;padding:0;margin:0;width:100%;height:100%;"></iframe>
</div>
</body>
</html>
Về cơ bản, tôi là tạo ra một div hoàn toàn vị trí bên dưới tiêu đề và kích thước nó để đưa lên phần còn lại của vũ trụ, sau đó đặt kích thước đầy đủ iframe trong đó .
Vấn đề tôi đang gặp phải là nếu bạn dán mã chính xác như bên dưới, sử dụng XHTML Strict, trong mỗi trình duyệt (được kiểm tra w/chrome/safari/ie8), bạn sẽ thấy thanh cuộn dọc với một vài pixel của khoảng trắng bên dưới div.
Thực hiện một số thử nghiệm, tôi thấy rằng nếu tôi loại bỏ hoàn toàn loại tài liệu hoạt động trong safari/chrome, nhưng IE thậm chí tệ hơn, thiết lập chiều cao khung nội tuyến là 300px hoặc hơn. Nếu tôi đặt DOCTYPE thành chuyển tiếp, nó hoạt động trong safari/chrome nhưng có cùng một vấn đề như trong trường hợp nghiêm ngặt đối với IE8. Nếu tôi sử dụng loại tài liệu HTML5, nó có cùng một vấn đề nghiêm ngặt trong tất cả các trình duyệt.
Cuối cùng, nếu tôi xóa khung nội tuyến trong bất kỳ trường hợp nào trong số này, mọi thứ sẽ được thực hiện tốt.
Bất kỳ ai có ý tưởng nào?
Cảm ơn, điều đó đã xảy ra! Chỉ cần ra khỏi tò mò, bất kỳ ý tưởng tại sao các nội dung bổ sung được hiển thị? Về mặt khái niệm, có vẻ như mọi thứ đều vừa vặn trong trang. – Keevon
Một trong những lỗi padding/margin tuyệt vời của IE - Tôi chắc chắn ... –
Tuyệt vời. Cảm ơn bạn. Bạn đã đưa ra phần câu đố còn thiếu trong tìm kiếm dài phiền toái của tôi để cố gắng làm việc này. Thật không may, trong IE 6 & 7 (không biết về IE 8) tôi vẫn phải sử dụng một phong cách chỉ có IE: 'height: expression ((document.body.offsetHeight - 25) + 'px');'. Nhưng tôi ổn với điều này. Firefox và các trình duyệt khác bỏ qua kiểu này. May mắn là thanh tiêu đề của tôi có kích thước cố định. Nếu không, tôi sẽ phải sử dụng 'document.body.offsetHeight - document.getElementById ('headerbar'). OffsetHeight' hoặc một số như vậy. – ErikE