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

【问题标题】：Size div height dynamically based on number of divs根据 div 的数量动态调整 div 高度
【发布时间】：2015-09-09 15:45:51
【问题描述】：

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

当用户调整网格大小时，我希望新网格占用与原始 16x16 网格相同的空间。我正在使用“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

【问题讨论】：

您的问题与 CSS 相关，但几乎不可能修复错误，因为您的 html 是动态生成的。我建议您在其中创建一个包含 2 或 3 个不同生成的 HTML 标记的小提琴，以演示问题并允许摆弄。我不相信您的 jQuery 魔术会创建您真正想要的 HTML（例如，对于 n div 元素）。

标签： javascript jquery html css grid-layout

【解决方案1】：

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

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

编辑：这是您在 cmets http://jsfiddle.net/2xh2maya/2/ 之后对我所做更改的更新小提琴

【讨论】：

【解决方案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，那太慢了。

【讨论】：