<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<script type="text/javascript"src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<style>
.box{
width:100%;
height: 100vh;
background-color: bisque;
margin:auto;
position: relative;
/* overflow: hidden; */
}
#title{
width:100%;
height:50px;
background: yellow;
text-align: center;
}
.box .box-content {
position: relative;
min-height: 100%;
margin-left: 410px;
margin-right: 210px;
background-color: orange;
}
.child{
height:100%;
height:auto!important;
height:400px;
min-height:800px;
}
.box .box-left {
width: 210px;
position: absolute;
min-height: 100%;
left: 200px;
top:50px;
background-color: green;
}
#right11{
height: 50%;
background: pink;
height:auto!important;
height:400px;
min-height:400px;
}
#right12{
height: 50%;
background: blue;
height:auto!important;
height:400px;
min-height:400px;
}
.box .box-right {
width: 210px;
position: absolute;
min-height: 100%;
right: 0px;
top:50px;
background-color: pink;
}
#right31{
height: 50%;
background: pink;
height:auto!important;
height:400px;
min-height:400px;
}
#right32{
height: 50%;
background: blue;
height:auto!important;
height:400px;
min-height:400px;
}
#left {
width: 200px;
display: inline;
float: left;
background: #8a2be2;
position: absolute;
left:0px;
/* top:50px; */
height:auto!important;
height:800px;
min-height:800px;
z-index: 999;
}
#btn{
position: fixed;
z-index: 999;
width: 60px;
height: 40px;
top: 50%;
left:9px;
}
/* header,footer { height: 75px; background-color: aqua; } */
</style>
</head>
<body>
<div class="box">
<div id="title">我是title</div>
<div id="left">我是left</div>
<div class="box-content">
<div class="child">
中间主题内容asdasdasdsadsasda嘎达可根但是萨嘎萨嘎据阿里就够了及代理商解放螺
丝钉结案率放假啊了解
</div>
</div>
<div class="box-left">
<div id="right11">11</div>
<div id="right12">12</div>
</div>
<div class="box-right">
<div id="right31">31</div>
<div id="right32">32</div>
</div>
</div>
<button id="btn">隐藏</button>
</body>
<script type="text/javascript">
var aa=0;
$("#btn").click(function() {
if(aa){
$("#left").show();
$("#btn").text('隐藏')
$(".box-content").css({ 'margin-left': '410px'});
$(".box-left").css({ 'left': '200px'});
aa=0;
}else{
$("#left").hide();
$("#btn").text('显示')
$(".box-content").css({ 'margin-left': '210px'});
$(".box-left").css({ 'left': '0px'});
aa=1;
}
});
</script>
</html>
效果图：
导航栏显示
导航栏隐藏
