如何让网页不刷新的情况下动态改变div布局？

我想让这个页面随着我用鼠标调整浏览器大小而随时适应到该有的样子，该如何去做呢？

下面是代码，这个代码布局不会随着浏览器大小改变即时改变，必须刷新才行。如何改进呢？

<html>
<style>
*{margin:0;padding:0;border:0;}
#x1{width:100%;background:grey;}
#x2{width:100%;height:30px;background:yellow;}
</style>

<body>
<div>
<div id="x1"></div>
<div id="x2"></div>
</div>
</body>
<script>
var h1 = document.body.scrollHeight;
var get_x1 = document.getElementById('x1');
get_x1.style.height = h1-30;
</script>
</html>

谢谢

写在浏览器窗口改变事件里，window.onresize = function () {你的代码}

布局的话通常让css负责。
你可以看下css的媒体查询功能之类。不知道到答主想要的是不是响应式呢？？？

第一个考虑兼容性的话使用js的函数比如楼上回答的window.onresize
第二个就是css的@media（这个移动端适配用的多，如果你要写很长的恐怕不划算）

如果不考虑兼容性的话，可以使用calc函数，它会自动帮你计算的

<html>
<style>
*{margin:0;padding:0;border:0;}
html,body{height:100%}
#container{height: 100%}
#x1{width:100%;background:#CCC;
    height:-moz-calc(100% - 30px);
    height:-webkit-calc(100% - 30px);
    height:calc(100% - 30px);
}
#x2{width:100%;height:30px;background:yellow;}
</style>
<body>
    <div id="container">
        <div id="x1"></div>
        <div id="x2"></div>
    </div>
</body>
</html>

或者用absolute布局也可以

<html>
<style>
*{margin:0;padding:0;border:0;}
html,body{height:100%}
#container{height: 100%;position: relative;}
#x1{width:100%;background:#CCC;position: absolute;top:0;bottom:30px;}
#x2{width:100%;height:30px;background:yellow;position:absolute;bottom:0;}
</style>
<body>
    <div id="container">
        <div id="x1"></div>
        <div id="x2"></div>
    </div>
</body>
</html>

【热门文章】