Ein Div-Element teilen

Question

Gibt es eine Möglichkeit, ein Div in Stücke zu zerlegen, indem JavaScript oder CSS verwendet wird. Ich habe eine lange div mit Inhalten drin. Ich muss das div entsprechend einer bestimmten Höhe teilen und jede Abteilung als einen getrennten Block zeigen. Was ist der einfachste Weg, dies zu erreichen?

Angenommen, die Höhe des Hauptdiv ist 1500px. Ich muss das Div in 3 Teile mit einer Höhe von 500px teilen.

Wenn die Höhe des div 1600px ist, sollte es in 4 Teile aufgeteilt werden. Erste 3 mit einer Höhe von jeweils 500px und die letzte mit einer Höhe von 100px.

Answer 1

Sie können etwas einrichten, um die Höhe des Elements abzufragen und dann 500px Divs aus dem enthaltenden div hinzufügen oder entfernen.

Hier ist ein Beispiel dafür, wie die Höhe des div zu erhalten, die alle 5 Sekunden Überprüfung wird auch weiterhin:

in einem neuen div

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

Der nächste Schritt ist appendChild auf ‚FormBody‘ zu nennen hinzufügen die Verwendung von DOM.

Answer 2

Ein div kann nicht in einzelne Stücke geschnitten werden. Es kann gestylt werden, um bestimmte Höhe und Breite zu haben.

Answer 3

Etwas seltsam, Ihre Frage.

Was bestimmt die ursprüngliche Höhe des div, wenn es nicht Ihr Code ist? Die Größe des Inhalts?

Sie konnte dynamisch die Größe des div Umfrage mit Hilfe von Javascript, dann zusätzliche divs erstellen und sie hinter anhängen, dann (ich nehme an) aufgeteilt Ihre Inhalte über die divs (von einigen Hacky Faustregel), aber wenn Sie werden auf diese Art von Längen gehen, warum nicht im Voraus auf dem Server tun? Vor allem wie auf dem Client müssen Sie warten, bis der Browser das Rendern zum ersten Mal beendet, um die Höhe berechnen zu können (ich stelle mir vor), so dass es wahrscheinlich einige sehr unästhetische Effekte geben würde.