jQuery滚动不显示

Question

I'm writting a dynamic page using jQuery and I have a problem. I'm for example adding to my html file div's using append() function like this:

$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'></div>");

I will be creating different amount of that div's base on datebase so that's why I use this variable i to assign different id's for each div.

My problem is that even if I'm creating that div's in body and when I look at code they are in it, if I check body's height it is 0 (width is ok, something like 1200). Main problem with that is when there are too many div's they are beyond screen but there is no scroll bar. It's something like div's aren't in body although in code they are in. Could you propose me any solution for that? Or what am I doing wrong? My line of thought is that I'm using $(document).ready so html file is creating a page, but see empty body so height = 0 and all my div's are beyond body . What do you think about that?

Answer 1

An empty <div> does not have a height. Thus you could add as many as you want to the page and it will never get any longer. For the scroll-bar to appear you need to either set a height to the <div> with CSS like this:

.diamond_div{
    height:100px;
}

Or add some content to the <div> so you would have something like this instead:

$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'>hello</div>");

Then your <div> would have height and once there are enough on the page to go beyond the height of the browser, the scroll-bar will then appear.

---

Following on from your comments. Setting the position to "fixed" removes the element from the workflow and thus will not extend the length of the page in the normal way.

Answer 2

Take care of positioning; position:fixed removes your divs from normal flow ->

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.

as W3C says