Community Learn Tools Library Leisure

English

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

黄舟

Release： 2017-07-24 09:17:11

Original

5287 people have browsed it

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>

Copy after login

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>

Copy after login

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!

Related labels：

html iframe Nested

source：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：How to prevent web pages from being nested in iframes?

Statement of this Website

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