怎么让这个页面的高度跟着div的高度变化？
我是下面这样布局的 我点击按钮后中间的这个div变长了 超过1000px了 但是最外层的div没有跟着变化 我给最外层的div设置min-height：1000px也不行 这样设置后不但没有跟着变化反而变成了图片中的样子 这是为什么？怎样让里面这三个div的高度始终一样呢？
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="bootstrap.css" rel="stylesheet">
<style type="text/css">
*{margin:0;padding: 0;}
#main{width: 100%;height: 1000px;background-color: #ccc;}
#left,#right{height: 100%;}
#center{height: 100%;background-color: blue}
</style>
<script type="text/javascript">
window.onload=function(){
oBtn1=document.getElementById('btn1');
oDiv=document.getElementById('center');
oBtn1.onclick=function(){
oDiv.style.height="2000px";
}
}
</script>
</head>
<body>
<div id="main">
<div id="left" class="col-xs-2 col-sm-2 col-md-2 col-lg-3"></div>
<div id="center" class="col-xs-8 col-sm-8 col-md-8 col-lg-6">
<button id="btn1">aaa</button>
</div>
<div id="right" class="col-xs-2 col-sm-2 col-md-2 col-lg-3"></div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你给 #main 设置了高度，那么 #main 就会用这个高度，#center 只会溢出。解决方式可以改为增加 #main 的高度，让 #center 也是 100%。或者改用 flexbox。