结果是浏览器问题,额。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
html,body {
height: 100%;
}
.box {
height: 100%;
border: 1px solid #ddd;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
按照道理.box应该是填满屏幕的吧,可是在360极速浏览器中偏偏不是:
出现了滚动条,并且底部有留白。
莫名其妙的多出了17px。
在谷歌浏览器中测试正常
首先 你宽高用了 百分百 ,然后你有设置了 border,因此你上下左右各多了1px;是会出现滚动条的。具体获取的值的差异应该跟 滚动条的宽高有关,干脆给 body加个 overflow:hidden;或者给 box 设 box-sizing:border-box;