Absolutely positioned div with big height is not visible
DIV with absolute positioning and big height ( > 1000px ) starts at the middle of the first page ( in the PDF result doc ) and should appear on the second page. I made a simple html file and put the code below:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
</head>
<body>
<div style="position:relative;overflow: visible;">
<div id="bg_container" style="position:absolute;width:20%;!important;border: 3px solid red;height: 2000px;">
text inside the div
</div>
<div>
</body>
</html>
>prince ~/work/sample.html sample.pdf
Gives div with red border on the first page only . Result pdf attached.
- test.pdf 17.4 kB
You cannot push content onto the next page by giving it a very big fixed height, and specifying a fixed height will be treated as an indication not to break the block across pages, which is probably not what you want.
Is there any way I can tell prince to push content to the next page ? May be with javascript ... I'd like to know as much as possible about it. Please can someone suggest me ?
You can use a page float, eg. "float: top-next". What kind of layout are you trying to achieve?
Ok, let me explain,
I have a html file which contains an absolutely positioned container div in the center of page. That div contains a dynamic list of products. If there are more than 100-120 products list should be splitted across pages. Client can change container's position on the html page and list will be started from another position. (a kind of html content generator ). Could you please suggest something ?
It is difficult to achieve vertical centering for variable height content that may be longer than a page. It would be easier if you could just give a fixed vertical offset at the top of the first page, then let the content run naturally across subsequent pages.
ok, thanks , i will make a try.
