javascript - 如何让网页不刷新的情况下动态改变div布局？
本文介绍了javascript - 如何让网页不刷新的情况下动态改变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>谢谢
解决方案
如果不考虑兼容性的话，可以使用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>这篇关于javascript - 如何让网页不刷新的情况下动态改变div布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
