Размер div высота динамически зависит от количества div

Я делаю сетку из квадратных блоков размером 16x16. Однако эту сетку можно увеличить или уменьшить (40x40, 10x10, 60x60 и т. Д.), Нажав кнопку на странице и заполнив приглашение.

Когда пользователь изменяет размер сетки, я хотел бы, чтобы новая сетка занимала то же место, что и исходная сетка 16x16. Я использую 'vw' для определения ширины блоков div, которые, похоже, работают правильно (они динамически реагируют, чтобы соответствовать исходному размеру сетки). Однако высота каждого div, похоже, не отвечает должным образом, когда я использую 'vh', а 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});

});

});

Вот JSFiddle


javascript html jquery css grid-layout
person scobo    schedule 23.06.2015    source источник
comment
Ваша проблема связана с CSS, но исправить ошибку практически невозможно, поскольку ваш html генерируется динамически. Я предлагаю вам создать скрипку с двумя или тремя разными сгенерированными HTML-разметками, которые демонстрируют проблему и позволяют возиться. Я не уверен, что ваша магия jQuery создает тот HTML, который вам действительно нужен (например, для n ‹16 он создает много пустых элементов div).   -  person connexo    schedule 23.06.2015

Ответы (2)


arrow_upward
1
arrow_downward

Квадраты отвечают правильно, потому что они отображаются как ячейка таблицы, а не потому, что вы явно установили ширину равной 100vw. Если бы они отображались как элементы стиля блока, то 100vw означало бы, что один блок будет охватывать все окно просмотра.

Я думаю, что лучший способ сделать это - отобразить квадраты как элементы встроенного блока и вычислить явную ширину и высоту на основе ввода пользователя.

изменить: вот ваша обновленная скрипка с моими изменениями после комментариев http://jsfiddle.net/2xh2maya/2/

person 0dyss3us    schedule 23.06.2015

arrow_upward
1
arrow_downward

This can be achieved using flex. However, flex has some compatability issues. Take a look here for more information. So, this is my solution: 

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, и это было оооочень медленно.

person jaunt    schedule 23.06.2015