猿问

如何让网页不刷新的情况下动态改变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>


慕少森
浏览 786回答 1
1回答

富国沪深

如果不考虑兼容性的话，可以使用calc函数，它会自动帮你计算的<html><style>*{margin:0;padding:0;border:0;}html,body{height:100%}#container{height:&nbsp;100%}#x1{width:100%;background:#CCC;&nbsp;&nbsp;&nbsp;&nbsp;height:-moz-calc(100%&nbsp;-&nbsp;30px);&nbsp;&nbsp;&nbsp;&nbsp;height:-webkit-calc(100%&nbsp;-&nbsp;30px);&nbsp;&nbsp;&nbsp;&nbsp;height:calc(100%&nbsp;-&nbsp;30px); }#x2{width:100%;height:30px;background:yellow;}</style><body> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="container"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="x1"></div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="x2"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div></body></html>或者用absolute布局也可以<html><style>*{margin:0;padding:0;border:0;}html,body{height:100%}#container{height:&nbsp;100%;position:&nbsp;relative;}#x1{width:100%;background:#CCC;position:&nbsp;absolute;top:0;bottom:30px;}#x2{width:100%;height:30px;background:yellow;position:absolute;bottom:0;}</style><body> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="container"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="x1"></div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="x2"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答