iframe自适应高度+上导航下iframe布局+左固定右自适应布局
直接上代码
iframe代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
margin:0;
padding:0;
}
.nav{
width:100%;
background:red;
}
.nav ul{
margin:auto;
width:600px;
height:30px;
}
.nav li{
float:left;
list-style:none;
width:100px;
text-align:center;
background:green;
margin-right:20px;
line-height: 31px;
}
.nav li a{
text-decoration: none;
color:#000;
}
style>
head>
<body>
<div class="nav">
<ul>
<li><a href="javascript:void(0)">iframe1a>li>
<li><a href="javascript:void(0)">iframe2a>li>
<li><a href="javascript:void(0)">iframe3a>li>
<li><a href="javascript:void(0)">iframe4a>li>
<li><a href="javascript:void(0)">iframe5a>li>
ul>
div>
<iframe width="100%" src="iframe1.html" id="myiframe" scrolling="no" frameborder="0">iframe>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js">script>
<script>
$(function(){
$('.nav li a').click(function(){
$("#myiframe").attr('src',$(this).text()+'.html');
})
})
script>
body>
html>iframe1-5.html代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframetitle>
<style>
body{
width:100%;
}
*{
margin:0;
padding:0;
}
.sidebar{
width: 300px;
height: 300px;
background-color: pink;
float:left;
}
.content{
margin-left: 300px;
height: 100px;
background-color: blue;
}
.footer{
background-color: red;
text-align:center;
}
.outer:after{
display: block;
content:'';
clear: both;
visibility: hidden;
}
.outer{
zoom:1;
}
style>
head>
<body>
<div class="outer">
<div class="sidebar">固定宽度区111div>
<div class="content">自适应区div>
div>
<div class="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形div>
<script>
parent.document.getElementById("myiframe").height=0;
parent.document.getElementById("myiframe").height=document.body.scrollHeight;
script>
body>
html>因为iframe有跨域问题，请使用nginx等工具代理到本地
具体：
1.下载nginx
2.找到配置文件conf=>nginx.conf
3.配置文件http=>server=>listen
注意
1.nginx不能在中文名字路径下
2.网上的各种都是坑！！！！（不给完整源码，瞎几把说一堆，浪费时间）