我想让这个页面随着我用鼠标调整浏览器大小而随时适应到该有的样子，该如何去做呢？下面是代码，这个代码布局不会随着浏览器大小改变即时改变，必须刷新才行。如何改进呢<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>
1 回答
富国沪深
TA贡献1790条经验 获得超9个赞
如果不考虑兼容性的话，可以使用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>添加回答
举报
0/150
提交
取消