Мне нужно сделать следующее:
- У меня есть контент заголовка, который равен 70px и iframe с оберткой. Высота и ширина iframe должны быть установлены на 100% без прокрутки, за исключением прокрутки, которая появляется для тела, когда содержимое загружено, а размер содержимого больше.
- Содержимое iframe - это другая страница HTML из того же домена. IFrame также должен масштабироваться в соответствии с гибким HTML-кодом стр.
Может ли кто-нибудь помочь?
Вещи, которые я не могу использовать:
Позиция: Исправлено (в основном из-за script, который я использую для сторонних панелей
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bus Management System</title>
<!-- Viewport meta tag to prevent iPhone from scaling our page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
var iFrames = $('iframe');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
</script>
</head>
<style type="text/css" media="all">
html, body, iframe {width:100%; height:100%;box-sizing:border-box; margin:0; padding:0; border:0;}
body {border:4px solid green;}
iframe {border:6px solid red;width:100%; height:100%;display:block;}
#wrapper {border:2px solid blue; width:100%; height:100%;}
</style>
<body>
<div style="height:50px; background-color:#000; color:#fff;">Header</div>
<iframe src="http://www.google.com" style="width:100%; height:100%;" onLoad="calcHeight();"></iframe>
</body>
</html>