Divide a div element

Question

Hi, Is there a way to cut a div into number of pieces using JavaScript or CSS. I have a long div with contents inside it. I need to split the div according to a certain height and show each division as a separate block. What is the easiest way to achieve this?

Suppose the height of the main div is 1500px. I need to split the div into 3 pieces each with a height of 500px.

If the height of the div is 1600px, it should be split into 4 pieces. First 3 with a height of 500px each and the last with a height of 100px.

Answer 1

You can set something up to poll the height of the element and then add or remove 500px div's from the containing div.

Here's an example of how to get the height of the div that will continue checking every 5 seconds:

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

The next step is to call appendChild on 'FormBody' to add in a new div using the DOM.

Answer 2

A div cannot be cut into separate pieces. It can be styled to have certain height and width.

Answer 3

Slightly weird, your question.

What determines the original height of the div, if it isn't your code? The size of the contents?

You could dynamically poll the size of your div using javascript, then create extra divs and append them behind, then (I presume) split up your content across the divs (by some hacky rule of thumb), but if you're going to go to that kind of lengths, why not do it in advance on the server? Especially as on the client you'd have to wait for the browser to finish rendering the first time to be able to calculate the height (I imagine), so there would probably be some highly unaesthetical effects.

Answer 4

Hi phoenix,

Have you find any solution of your question...!!

I also require the solution...! that will be best if you have found any work-around or solution of the above problem..!

I also need to split a SINGLE DIV in to multiple DIVs by certain height.

Any help will be great!

Regards, Paresh