Home >Web Front-end >HTML Tutorial >Example analysis of how iframe nests web pages in html
Example analysis of how iframe nests web pages in html
- 黄舟Original
- 2017-07-24 09:17:115302browse
To place the iframe-nested web page in a certain position, just add a box outside the iframe and change the position of the box, such as:
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
</head>
<body>
<p class="main">
<iframe src="http://www.bootcss.com/" onload="changeFrameHeight()" id="myiframe" scrolling="yes" frameborder="0">
</iframe>
</p>
</body>
css is as follows:
<style type="text/css">
*{ padding: 0; margin: 0;}
body{background: green}
.main{ width: 80%; height: 500px; margin: 0 auto;}
.main iframe{ display: block; width:100%; height: 100%;}
</style>
The effect is as shown:
# #
The above is the detailed content of Example analysis of how iframe nests web pages in html. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Complete list of textarea attributes in HTML (set default value, height adaptive, obtain content, limit the number of input characters, placeholder)Next article：Complete list of textarea attributes in HTML (set default value, height adaptive, obtain content, limit the number of input characters, placeholder)