根据 div 的数量动态调整 div 高度

Question

我正在制作一个以 16x16 开头的正方形 div 网格。但是，可以通过单击页面上的按钮并填写提示来将此网格的大小调整为更大或更小（40x40、10x10、60x60 等）。

当用户调整网格大小时，我希望新网格占据与原始 16x16 网格相同的 space。我正在使用 'vw' 来调整 div 的宽度，这似乎工作正常（它们动态响应以适应网格的原始大小）。但是，当我使用 'vh' 并且 div 超出容器 div 时，每个 div 的高度似乎没有正确响应。

这是 HTML：

<! DOCTYPE html>
<html>

<head>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="grid.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="grid.css">
    <title>The Grid</title>
</head>

<body>

    <button type="button">Click Me!</button>

    <div class="grid">

    </div>


</body>


</html>

这是 CSS：

body {
background: #000;
}

.square {
background-color: white;
display: table-cell;
border: 1px solid black;
width: 100vw;
height: 7.75vh;
}

.highlighted {
background-color: #0000FF;
}

这是JavaScript：

$(document).ready(function () {
var $grid = $('.grid');
for (var i = 0; i < 16; i++) {

    var row = '<div>';

    for (var j = 0; j < 16; j++)
        row += '<div class = "square"></div>';

    row += '</div>';

    $grid.append(row);

}


$('button').on('click', function () {
    $('.square').detach();
    var gridPrompt = prompt('How many squares per side would you like to make the current grid?');

    var $grid = $('.grid');
    for (var i = 0; i < gridPrompt; i++) {

    var row = '<div>';

    for (var j = 0; j < gridPrompt; j++)
        row += '<div class = "square"></div>';

    row += '</div>';

    $grid.append(row);
    console.log(gridPrompt);
}

var newColor = ('#'+Math.floor(Math.random()*16777215).toString(16));
$('.square').on('mouseenter', function () {
    $(this).css({'background-color': newColor});

});

});

var newColor = ('#'+Math.floor(Math.random()*16777215).toString(16));
$('.square').on('mouseenter', function () {
    $(this).css({'background-color': newColor});

});

});

Here's the JSFiddle

Answer 1

正方形正确响应是因为它们显示为 table 单元格，而不是因为您已将宽度明确设置为 100vw。如果这些显示为块样式元素，那么 100vw 将意味着单个块将跨越整个视口。

我认为更好的方法是将方块显示为行内块元素，并根据用户的输入计算明确的宽度和高度。

编辑：这是您的更新 fiddle，我根据评论 http://jsfiddle.net/2xh2maya/2/

进行了更改

Answer 2

这可以使用 flex 来实现。但是，flex 存在一些兼容性问题。查看 here 了解更多信息。所以，这是我的解决方案：

function LoadBlocks(){ 
  var grid = document.getElementById('container'),
      size = prompt('How many squares per side would you like to make the current grid?'),
      newColor = ('#'+Math.floor(Math.random()*16777215).toString(16));
  while (grid.hasChildNodes()){grid.removeChild(grid.lastChild);}
  for (y=0;y<size;y++){
    var row = document.createElement('div');
    row.className = "row";
    for (x=0;x<size;x++){
      var block = document.createElement('div');
      block.className = "object";
      row.appendChild(block);
    }
    grid.appendChild(row);
  }
  $("div.object").hover(function(){$(this).css("background-color", newColor);});
}

#container{
  width:500px;
  height:500px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction: column;
}
.row{
  flex:1;
  display:flex;
}
.object{
  flex:1;
  background-color: wheat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<input type="button" onclick="LoadBlocks()" value="Generate"/>

旁注：您可能希望为用户可以输入的大小添加上限。我刚试了 600，那太慢了。

根据 div 的数量动态调整 div 高度

Size div height dynamically based on number of divs

javascript

jquery

html

css

grid-layout