Javascript 根据div数动态调整div高度_Javascript_Jquery_Html_Css_Grid Layout

Javascript 根据div数动态调整div高度

javascript jquery html css

Javascript 根据div数动态调整div高度,javascript,jquery,html,css,grid-layout,Javascript,Jquery,Html,Css,Grid Layout,我正在制作一个以16x16开始的正方形div网格。但是，通过单击页面上的按钮并填写提示，可以将该网格调整为更大或更小（40x40、10x10、60x60等）当用户调整网格大小时，我希望新网格占用与原来16x16网格相同的空间。我使用“vw”来调整div的宽度，这似乎工作正常（它们动态响应以适应网格的原始大小）。然而，当我使用“vh”时，每个div的高度似乎没有正确响应，并且div延伸到容器div之外以下是HTML： <! DOCTYPE html> <html> &

我正在制作一个以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>

下面是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});

});

});

$（文档）.ready（函数（）{
var$grid=$（'.grid'）；
对于（变量i=0；i<16；i++）{
var行=“”；
对于（var j=0；j<16；j++）
行+=''；
行+=''；
$grid.append（行）；
}
$（'button'）。在（'click'，函数（）{
$（'.square'）.detach（）；
var gridPrompt=prompt（'您希望生成当前网格的每边有多少个正方形？'）；
var$grid=$（'.grid'）；
对于（var i=0；i


方块正确响应是因为它们显示为表格单元格，而不是因为您已明确将宽度设置为100vw
。如果这些显示为块样式元素，则100vw
将意味着单个块将覆盖整个视口
我认为更好的方法是将正方形显示为内联块元素，并根据用户的输入计算显式的宽度和高度
编辑：这是你在评论之后对我的更改所做的更新，这可以通过flex实现。但是，flex存在一些兼容性问题。查看更多信息。
这就是我的解决方案：
函数加载块（）{
var grid=document.getElementById（'container'），
size=prompt（'您希望当前网格的每边有多少个正方形？'），
newColor=（“#”+Math.floor（Math.random（）*16777215.toString（16））；
while（grid.hasChildNodes（）{grid.removeChild（grid.lastChild）；}
对于（y=0；yy）您的问题与CSS有关，但几乎不可能修复错误，因为您的html是动态生成的。我建议您在其中创建一个包含2或3个不同生成的html标记的修补程序，以演示问题并允许修补。我不相信您的jQuery魔术会创建您真正想要的html（例如，对于n<16，它会产生大量空div元素）。
$(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});

});

});