如何在两个div中显示动态内容,每个div有一定的高度?

时间:2022-01-04 12:00:02

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.

我有一个很长的html内容(html片段)从服务器端获取,我想在一个页面上显示两个div,比如div1和div2,每个div有一定的高度,div中没有​​滚动条, HTML内容是动态的,可能是长或短,如果它太大而不适合div1,它将自动扩展为div2,而不是使用长滚动条显示div1中的所有内容。

is it possible to do it? How?

有可能做到吗?怎么样?

Many thanks.

1 个解决方案

#1


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:

如果您希望内容平均分配,则可以将内容分为两部分。然后你可以在两个单独的div中显示。像这样的东西:

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;

#1


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:

如果您希望内容平均分配,则可以将内容分为两部分。然后你可以在两个单独的div中显示。像这样的东西:

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;