SOURCE

$(".right").click(function () {
    $(".right").toggleClass('close')
})

<div class="app">

	<header>头部</header>


	<div class="main">
		<div class="left">左侧</div>
		<div class="content">内容</div>
		<div class="right off">右侧</div </div>



		<footer>底部</footer>
</div>

.app {
    width: 1000px;
    margin: 0 auto;
}

header,
footer {
    height: 60px;
    background: lightcyan
}

.left {
    height: 800px;
    background: green;
    width: 200px;
}

.right {
    height: 800px;
    background: yellow;
    width: 200px;
    transition: all ease 0.6s;
}

.close{
     width: 30px;
     height: 30px;
     transition: all ease-in-out 0.6s;
}

.content {
    height: 800px;
    background: red;
}

.main {
    margin: 5px 0px;
}


/* 绝对定位 */

 .main {
    position: relative;
    min-height: 800px;
}

.left {
    position: absolute;
    top: 0;
     height: 200px;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
     height:300px;
}

.content {
    /* margin-left: 200px;
    margin-right: 200px; */
    width: 300px;
    position: absolute;
    left: 200px;
    right: 200px;
  
   
} 


/* 相对定位 */

/* .main{
    overflow: hidden;
}

.left{
    height: 200px;
    float: left;
}

.right{
     height: 500px;
    float: right;
}
.content{
    overflow: hidden;
} */
30