已解決430363個問題，去搜搜看，總會有你想問的

如何讓網頁不刷新的情況下動態改變div布局？

首頁猿問如何讓網頁不刷新的情況下動態改變d...

如何讓網頁不刷新的情況下動態改變div布局？

JavaScript

慕少森 2018-08-08 09:10:28

我想讓這個頁面隨著我用鼠標調整瀏覽器大小而隨時適應到該有的樣子，該如何去做呢？下面是代碼，這個代碼布局不會隨著瀏覽器大小改變即時改變，必須刷新才行。如何改進呢<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>

反對回復 2018-09-19

1 回答
0 關注
796 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何讓網頁不刷新的情況下動態改變div布局？

如何讓網頁不刷新的情況下動態改變div布局？

1 回答

添加回答

如何讓網頁不刷新的情況下動態改變div布局？

如何讓網頁不刷新的情況下動態改變div布局？