CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Frank
Frank

Reputation: 323

overflow to the next div with jQuery

I'm using a little hack to deal with the overflow. The js copy the the first div content and paste it to the second with a negative top offset. 

.bg {
  position:relative;
  width:8.5in; height:11in;
  background-color:#306;
}
.content-wrap {
  position:absolute;
  width:8in; height:10.5in;
  padding: 25px 15px;
  background-color:#FFF;
  left:0.25in; top:0.25in;                         
}
.content {
  max-width:100%; max-height:100%;
  overflow:hidden;
  background-color:#CCC;                           
}


<div class="bg">
    <div class="content-wrap">
        <div id="mydiv1" class="content">           
            some html...<p></p>...<ul></ul>...<div></div>
        </div>
    </div>
</div> 


<div class="bg">
    <div class="content-wrap">
        <div id="mydiv2" class="content"></div>      
    </div> 
</div> 


var copy = $("#mydiv1").clone().css({
    "margin-top": '-'+ $("#mydiv1").height() +'px',
    "height": $("#mydiv1").height() * 2 +'px'});

$("#mydiv2").append(copy);

As you can see on the next image, it's not perfect. How to get a perfect result?

enter image description here

Upvotes: 1

Views: 345

Answers (1)

Andrew Axton
Andrew Axton

Reputation: 1030

The problem is the height of your div doesn't match the line-height of your text. Your line-height needs to be divisible by the height of the div. Try adjusting it so that the last line of the first box is flush with the bottom.

Upvotes: 1

Related Questions