溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
html{
height:100%;
font-size:100px;
}
body{
height:100%;
}
.top-img{
width:100%;
height:0.4rem;
position:absolute;
left:0;
top:0;
}
.div1{
margin-top:1rem;
width:100%;
height:1rem;
background:red;
}
.div2{
width:100%;
height:1rem;
background:blue;
}
</style>
</head>
<body>
<img src="p_w_picpaths/ms_01.png" alt="" class="top-img">
<div class="div1"></div>
<div class="div2"></div>
<script>
var screenW = document.documentElement.offsetWidth || document.body.offsetWidth;
console.log(screenW)
var nowW = screenW/640 * 100;
var oHtml = document.getElementsByTagName('html')[0];
oHtml.style.fontSize = nowW + 'px';
console.log(nowW)
</script>
</body>
</html>
這是移動端開發的一個小測試。按照上面的代碼，最終的結果是頁面產生了滾動條，為啥呢！！！，糾結死。。。
究其原因，發現其實是margin的無邊界問題，.top-img設置了絕對定位，所以在給.div1加上margin-top后由于沒有相對的邊界所以body的高度被撐開了所以就有了滾動體。
解決辦法，去掉.top-img的絕對定位改為：
.top-img{
width:100%;
height:0.4rem;
}
以為這樣就行了，no！，這個時候.top-img會把上面下面都撐開一段距離，不止3像素，不知道到底是啥原因，反正再加上display:block就搞定了。。。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
