Skip to content

Instantly share code, notes, and snippets.

@andreymukha

andreymukha/iframe.html

Created October 17, 2017 17:36
Show Gist options
  • Save andreymukha/8f0331dac73cd98fb314451ab2da6e72 to your computer and use it in GitHub Desktop.
Save andreymukha/8f0331dac73cd98fb314451ab2da6e72 to your computer and use it in GitHub Desktop.
Download ZIP
Высота iframe по высоте его содержимого
Raw
iframe.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>iframe</title>
</head>
<body>
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi aperiam delectus eaque id ipsam ipsum laudantium nesciunt non odio perferendis, quae quaerat quasi qui quibusdam ratione totam velit veniam?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi aperiam delectus eaque id ipsam ipsum laudantium nesciunt non odio perferendis, quae quaerat quasi qui quibusdam ratione totam velit veniam?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi aperiam delectus eaque id ipsam ipsum laudantium nesciunt non odio perferendis, quae quaerat quasi qui quibusdam ratione totam velit veniam?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi aperiam delectus eaque id ipsam ipsum laudantium nesciunt non odio perferendis, quae quaerat quasi qui quibusdam ratione totam velit veniam?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi aperiam delectus eaque id ipsam ipsum laudantium nesciunt non odio perferendis, quae quaerat quasi qui quibusdam ratione totam velit veniam?
</p>
</div>
</body>
</html>
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
function _setIframeHeight(iframe) {
iframe.css({
'min-height': ''
});
iframe.css({
'min-height': iframe.contents().outerHeight()
});
}
function iframeAutoHeight() {
var iframe = $('#frame');
if (!iframe.length) {
return false;
}
_setIframeHeight(iframe);
iframe.off('load.ws').on('load.ws', function () {
_setIframeHeight(iframe);
});
}
$(function () {
iframeAutoHeight();
});
$(window).on('resize.ws', function () {
iframeAutoHeight();
});
</script>
</head>
<body style="max-width: 960px; margin: 0 auto;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi dignissimos eaque, earum eius exercitationem in iste itaque molestias nostrum odit optio perspiciatis quia quibusdam quo
ratione repellat voluptatem. Dolorem?
</p>
<iframe id="frame" src="iframe.html" width="100%" style="border: 0;"></iframe>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi dignissimos eaque, earum eius exercitationem in iste itaque molestias nostrum odit optio perspiciatis quia quibusdam quo
ratione repellat voluptatem. Dolorem?
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment