0

I have a long html content(html snippet) fetch from server side, I would like to display it on a page with two divs, say, div1 and div2, each div with definite height, no scroll bar in a div is allowed, the html content is dynamic, maybe long or short, if it's too large to fit in div1, it will automatically expand to div2, rather than displaying all content in div1 with long scrolling bar.

is it possible to do it? How?

Many thanks.

July
  • 855
  • 4
  • 11
  • 22
  • Yes this is possible, although determining the height at which to split the content will not be easy. – Rory McCrossan Jan 15 '15 at 07:34
  • You are try to append overflow content to different div. – shanidkv Jan 15 '15 at 07:36
  • [is there a way to fire a event when vertical overflow is detected in a div?](http://stackoverflow.com/questions/8092137/is-there-a-way-to-fire-a-event-when-vertical-overflow-is-detected-in-a-div) – merlin Jan 15 '15 at 07:37
  • Is using two `div`s part of your real requirements, or could you do with just one `div` with CSS 'column' set? – Abhitalks Jan 15 '15 at 07:38
  • http://stackoverflow.com/questions/3196677/how-do-i-overflow-the-contents-of-a-column-into-the-next-column-using-css or even http://stackoverflow.com/questions/19542909/2-css-columns-spliing-text-into-next-column – A. Rama Jan 15 '15 at 07:38
  • @abhitalks good questions! thanks all for the links will look into it later. – July Jan 15 '15 at 07:41
  • Give your code sample.. – Ahosan Karim Asik Jan 15 '15 at 07:41
  • @July: In that case you could use something like this: http://jsfiddle.net/abhitalks/gj8hf54t/ – Abhitalks Jan 15 '15 at 07:44

1 Answers1

0

If you want your content to be equally distributed, then you can split your content in two parts. And then you can show in two seperate divs. Something like this: 

var content = getContent(); // getContent() is a method by which you are getting the content
var len = content.length;
var halfContent = content.substring(0, len/2);
var secondHalf = content.substring(len - len/2, len);
document.getElementById('div1').innerText = halfContent;
document.getElementById('div2').innerText = secondHalf;
Akshat
  • 479
  • 4
  • 9
  • 2
    This divides content exactly into two, without seeing if the content is overflowing. I think the question was to move the overflowing content only. – T90 Jan 15 '15 at 07:48