我正在制作一个以 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});
});
});
最佳答案
这些方 block 能够正确响应，因为它们显示为表格单元格，而不是因为您已将宽度显式设置为 100vw。如果这些显示为 block 样式元素，则 100vw 将意味着单个 block 将跨越整个视口(viewport)。
我认为更好的方法是将正方形显示为内联 block 元素，并根据用户的输入计算显式宽度和高度。
编辑:这是您根据评论 http://jsfiddle.net/2xh2maya/2/ 进行的更改的更新 fiddle
关于javascript - 根据 div 数量动态调整 div 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31009636/