Разделить элемент div

Question

Есть ли способ разрезать деление на количество частей, используя JavaScript или CSS . У меня длинный div с содержимым внутри. Мне нужно разделить div в соответствии с определенной высотой и показать каждое деление в виде отдельного блока. Какой самый простой способ добиться этого?

Предположим, что высота основного div равна 1500px. Мне нужно разделить div на 3 части высотой 500 пикселей.

Если высота div равна 1600px, его следует разделить на 4 части. Первые 3 с высотой 500px каждый и последний с высотой 100px.

Answer 1

Немного странно, твой вопрос.

Что определяет исходную высоту div, если это не ваш код? Размер содержимого?

Вы можете динамически опрашивать размер вашего div, используя javascript, затем создавать дополнительные div и добавлять их позади, а затем (я предполагаю) разделить ваш контент по div (по какому-то хакерскому правилу) , но если вы собираетесь пойти на такие длины, почему бы не сделать это заранее на сервере? Тем более что на клиенте вам придется подождать, пока браузер завершит рендеринг в первый раз, чтобы иметь возможность рассчитать высоту (я представляю), так что, вероятно, будут некоторые весьма неэстетичные эффекты.

Answer 2

Div нельзя разрезать на отдельные части. Он может иметь определенную высоту и ширину.

Answer 3

Вы можете настроить что-либо, чтобы опрашивать высоту элемента, а затем добавлять или удалять элементы размером 500px из содержащего элемента.

Вот пример того, как получить высоту элемента div, который будет продолжать проверяться каждые 5 секунд:

<script type="text/javascript">
    function checkDiv() {
        alert(document.getElementById('FormBody').offsetHeight);
        setTimeout(checkDiv, 5000);
    }
    setTimeout(checkDiv, 5000);
</script>

Следующим шагом является вызов appendChild для FormBody для добавления нового div с использованием DOM.