iframe 布局 - 爱码网

iframe 简单的使用

iframe.html

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iframe</title>
    <style>
        #iframeTop{
            width: 100%;
            height: 15%;
            background-color: #565656;
        }
        #iframeLeft{
            width: 15%;
            height: 763px;
            float: left;
            background-color: #ccc;
        }
        #iframeContent{
            width: 84%;
            height: 763px;
            margin-left: 1%;
            background-color: #fff;
        }
    </style>
	<body>
		<div>
		    <iframe id="iframeTop" name="iframeTop" frameborder="0"></iframe>
		    <iframe id="iframeLeft" name="iframeLeft" frameborder="0" src="view/left.html"></iframe>
		    <iframe id="iframeContent" name="iframeContent" frameborder="0"></iframe>
		</div>
	</body>
</html>

left.html

<html>
<head>
	<title>left</title>
</head>
	<body>
		<a href="content.html" target="iframeContent">content</a>
		<br/>
		<a href="haha.html" target="iframeContent">haha</a>
	</body>
</html>

content.html

<html>
<head>
	<title>content</title>
</head>
<body>
	<h1>contentcontent</h1>
</body>
</html>

haha.html

<html>
<head>
	<title>haha</title>
</head>
<body>
	<h1>hahahhahhahha</h1>
</body>
</html>

OK,以上就可以完成一个iframe 简单的布局，效果图如下：
iframe 布局