html在div大小变化而变化,怎么让这个页面的高度跟着div的高度变化？

我是下面这样布局的 我点击按钮后中间的这个div变长了 超过1000px了 但是最外层的div没有跟着变化 我给最外层的div设置min-height：1000px也不行 这样设置后不但没有跟着变化反而变成了图片中的样子 这是为什么？怎样让里面这三个div的高度始终一样呢？

*{margin:0;padding: 0;}

#main{width: 100%;height: 1000px;background-color: #ccc;}

#left,#right{height: 100%;}

#center{height: 100%;background-color: blue}

window.οnlοad=function(){

oBtn1=document.getElementById('btn1');

oDiv=document.getElementById('center');

oBtn1.οnclick=function(){

oDiv.style.height="2000px";

}

}

aaa