Javascript 添加同一类的多个div，直到填充浏览器高度

我想在行中添加具有相同特定高度的div，直到浏览器窗口被div填充

我可以静态地做，添加x行，每个行的高度都是XXXpx，以确保它是以（大多数）分辨率填充的

        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>

然而，这将导致一些问题，用户将徒劳地向下滚动，并且一些分辨率较高的用户将在页面底部看到空白

我想动态地这样做。因此，添加一行108像素，直到屏幕充满行-无论屏幕分辨率如何。 这些行将是一个div，所有这些行都是同一个类，在这种特定情况下，高度为108px

---

谢谢大家!

您可以获得窗口高度和div数量，然后将它们除以，得到所需的高度

更新

现在设置默认div高度，脚本添加填充页面所需的div

$（文档）.ready（函数（）{
calculateDivs（）
})
$（窗口）。调整大小（函数（）{
container.empty（）
calculateDivs（）
})
//默认高度（以像素为单位）
var div_h=108；
var容器=$（document.body）；
函数calculateDivs（）{
//获取窗口高度并减去默认页边距
var w_h=$（窗口）.height（）-20
//根据窗口高度和div默认高度获取div数量
var divs=数学.round（w_UH/div_uh）；
//在窗口中插入div（本例直接在主体中插入）
对于（变量i=0；i

.row{
保证金：5px；
背景色：红色；
}
*{
框大小：边框框；
}

带有

• window.innerHeight

• window.addEventListener（“resize”，function（）{}）

每次调整窗口大小时，清除容器的innerHTML

container.innerHTML=”“

行数

Math.floor（window.innerHeight/height）

在循环中创建div并将其添加到容器中

例子 （容器垂直居中）

函数makeRows（dh）{//div height
var h=窗内高度，
container=document.getElementsByClassName（“容器”）[0]，
l=数学楼层（h/dh）；
container.innerHTML=“”；
对于（变量i=0；i
*{
框大小：边框框；
}
html，
身体{
身高：100%；
宽度：100%；
}
身体{
保证金：0；
/*将容器垂直居中*/
显示：表格；
}
.集装箱{
/*将容器垂直居中*/
显示：表格单元格；
垂直对齐：中间对齐；
身高：100%；
}
您正在寻找一种响应性强的设计，使用框架可能比尝试自制框架更好。你看过Bootstrap吗？我想不清楚你想从我们这里得到什么？完整的代码片段？您应该向我们展示您尝试了什么（动态创建行）。那我们就可以帮你了。谢谢你，我现在真的使用了骨架作为一个框架。问题是，如果我的问题不清楚的话，我想用一个脚本，抱歉，让divs追加，直到屏幕被填满。嗨，本杰明，我现在没有尝试过任何东西，因为我完全不知道从哪里开始。我可以从创建divs append开始，但我不确定如何让代码段理解在页面填充时如何结束。@user2883106您能解释一下为什么或者追溯运行脚本的目的是什么吗？我认为你把一项相对简单的任务复杂化了。效果很好！谢谢！：）