我的目标： 获取网页宽度、高度。 动态生成18个p块，高度为网页高度/3，宽度为网页宽度/6。
HTML:
6
690
demo
JS:
var sW = document.body.clientWidth;
var sH = document.body.clientHeight;
function cre(){
let pose = document.createElement("p");
pose.setAttribute("class","ap");
pose.setAttribute("style","display:inline-block");
pose.style.height=sH/3+"px";
pose.style.width=sW/6+"px";
document.body.appendChild(pose);
}
function firstPose(){
for(let i=0; i<18 ; i++ ){
setTimeout(cre(),300);
if(i==5||i==11||i==17){
document.body.appendChild(document.createElement("br"));
}
}
}
window.onload=firstPose();
CSS:
html{
height: 100%;
width: 100%;
}
body{
height: 100%;
width: 100%;
margin: auto;
line-height: 10px;
}
.ap{
background: black;
margin: 0;
padding: 0;
}
.ap:hover{
opacity: 0;
}效果图：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
不用大动干戈...
jsfiddle
/3, /6 出现换行或者纵向滚动条 应该是因为小数点的问题，毕竟 px 的最小单位是 1
可以尝试前面几行/列的值向上取整，最后一行/列使用总值减其他行/列和；
-- 不过不建议这样，毕竟窗口宽度会变化，那你还得监听 resize 重新计算赋值。
最好是直接在 CSS 中使用 %：
-- 自己测试一下哈。 --
如下，加了个随机背景颜色
或者对兼容性要求不高的话，建议使用楼上的 vh.
不建议使用vh vw, 兼容性不好.
直接用百分比即可, 而且百分比是基于上层容器的宽度.
vh vw, v是什么含义?(我不是在问问题, 自行百度思考一下)
比如说有一个局部的组件去开发, 平行4个等宽的p去呈现头像, 也用vw?
有一个问题楼上也说到了，v既然是viewport，那么他的大小是可视化区域的大小，如果想在父级元素下面进行等比划分的话，使用vh,vw是不行的，因为不是相对于父级元素，而是相对于可视区域。
demo
题主 告诉你个最简单的解决办法吧 p设置display=“inline-block”的时候会自带一个默认大小的间隔 font-size=“0”就能解决 不过唯一的缺陷就是：p填充内容的话要单独设置font-size。。