我用的是
右侧 专门 弄一个 div , 然后左边导航栏,每次要打开新页面, 就在 右侧的div里 创建一个 iframe,并绑定 页面
var $newIframe = $(document.createElement("iframe"));
$newIframe.attr('id', id); // iframe的id,唯一即可
$newIframe.attr('src', src); // src 为 新页面地址
$newIframe.css('width', '100%');
var height = window.screen.height * 0.76;
$newIframe.css('height', height);
$newIframe.attr('frameborder', '0');
$newIframe.attr('scrolling', 'yes');
$("#右侧的div的id选择器").html($newIframe);
举个例子,刚刚在第四点里面我用了绝对定位,我不想他的参考点是浏览器左上角,而是最外层的这个大盒子,那么我就去给大盒子添加一个相对定位,整个代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 大盒子的样式 */
.a1 {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
margin: 10px 10px;
position: relative;
}
/* 盒子1号的样式 */
.a2 {
width: 100px;
height: 100px;
background-color: aquamarine;
}
/* 盒子2号的样式 */
.a3 {
width: 100px;
height: 100px;
background-color: aqua;
position: absolute; /*设置为绝对定位*/
top: 20px;
left: 20px;
}
.a4 {
width: 100px;
height: 100px;
background-color:antiquewhite;
}
</style>
</head>
<body>
<div class="a1">
<div class="a2">盒子1号</div>
<div class="a3">盒子2号</div>
<div class="a4">盒子3号</div>
</div>
</body>
</html>
效果如下,这样参考点就变成了大盒子的左上角,一般在项目中就是这样使用的,既然小盒子在大盒子之中,就要参考点设置为大盒子,这样更好操作: