Question

我想在行中添加具有相同特定高度的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 px，直到屏幕充满行 - 无论屏幕分辨率如何。行将是一个div，它们都是同一个类，在这种情况下，高度为108px。

谢谢！

Answer 1

使用

window.innerHeight
window.addEventListener("resize", function() {})

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

container.innerHTML = ""

行数

Math.floor(window.innerHeight / height)

在循环中创建div并将它们添加到容器中。

实施例

（容器垂直居中）

＆＃13;

function makeRows(dh) { // div height
  var h = window.innerHeight,
    container = document.getElementsByClassName("container")[0],
    l = Math.floor(h / dh);
  container.innerHTML = "";
  for (var i = 0; i < l; i += 1) {
    var div = document.createElement("div");
    div.style.height = dh + "px";
    div.style.border = "3px solid brown";
    div.setAttribute("class", "row");
    container.appendChild(div);
  }
}

window.addEventListener("resize", function() {
  makeRows(108);
});

makeRows(108);

＆＃13;

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  /* Vertically center the container */
  display: table;
}

.container {
  /* Vertically center the container */
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}

＆＃13;

<div class="container"></div>

＆＃13;

Answer 2

你可以得到窗口高度和div数量，除以它们并获得所需的高度。

<强>更新

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

$(document).ready(function(){
  calculateDivs()
})

$( window ).resize(function() {
  container.empty()
  calculateDivs()
})

//Default height in pixels
var div_h = 108;
var container = $(document.body);

function calculateDivs(){

  //Get window height and substract default page margins
  var w_h = $(window).height() - 20 
  
  //Get div quantity based on window heihgt and div default height
  var divs = Math.round(w_h / div_h);
  
  //Insert div in window (this case in the body directly)
  for(var i = 0; i < divs; i++){
    container.append($('<div class="row">'));
  }
  
  //Margins of the divs (if there is no margin set this to 0)
  var margin = 5

  //Set height to all appended divs
  $('.row').css('height', w_h / divs - margin)
}

.row{
 margin: 5px;
  background-color: red;
}

*{
 box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

添加几个相同类的div，直到填充浏览器高度

2 个答案:

实施例