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

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

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

источник

2015-06-23 scobo

Ваша проблема связана с CSS, но почти невозможно исправить ошибку, так как ваш html динамически генерируется. Я предлагаю вам создать скрипку с 2 или 3 различными сгенерированными HTML-надписями, которые демонстрируют проблему и позволяют возиться. Я не уверен, что ваша магия jQuery создает HTML-код, который вам действительно нужен (например, для n <16 он генерирует много пустых элементов div). – connexo

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

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

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

источник

2015-06-23 18:06:43 0dyss3us

Это может быть достигнуто с помощью гибкого трубопровода. Однако 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"/>

Side Примечание: Вы можете добавить верхний предел размера пользователь может войти. Я только что попробовал 600, и это было так ошеломительно.

источник

2015-06-23 21:42:20 jaunt

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

ответ

Смежные вопросы