Increasing height of body div tag dynamically
Hi
I am java developer but i am strucked with css application. Actually i am using tiles concept in my application in which layout page using css tags to specify positions of header,menu ,body,footers.In this project my body content is getting dynamically from database when the content is more my body page is coming out of the footer pls help how to solve this problem my increasing the class "container" height dynamically this is my layout page.
Code:
<html>
<head>
<link href="./css/<%=css%>.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;height:100%">
<tr>
<td colspan="2" height="130">
<tiles:insert attribute="header"/></td>
</tr>
<tr>
<td width="190">
<tiles:insert attribute="menu"/></td>
<td width="710">
<tiles:insert attribute="body"/></td>
</tr>
<tr>
<td colspan="2" height="30">
<tiles:insert attribute="footer"/></td>
</tr>
</table>
</div>
</body>
</html>
Re: Increasing height of body div tag dynamically
Have you tried using the height and width properties for the div, ie :
PHP Code:
<div class="container" style="width:200 px;height:400 px">
Just an ad hoc example.
Re: Increasing height of body div tag dynamically
You can calculate body dimensions but you can't set them, or at least browsers will ignore these parameters. Do as HanneSThEGreaT suggested, create a wrapper div and set its height.
Re: Increasing height of body div tag dynamically
Quote:
Originally Posted by
vina789
Hi
I am java developer but i am strucked with css application. Actually i am using tiles concept in my application in which layout page using css tags to specify positions of header,menu ,body,footers.In this project my body content is getting dynamically from database when the content is more my body page is coming out of the footer pls help how to solve this problem my increasing the class "container" height dynamically this is my layout page.
Code:
<html>
<head>
<link href="./css/<%=css%>.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;height:100%">
<tr>
<td colspan="2" height="130">
<tiles:insert attribute="header"/></td>
</tr>
<tr>
<td width="190">
<tiles:insert attribute="menu"/></td>
<td width="710">
<tiles:insert attribute="body"/></td>
</tr>
<tr>
<td colspan="2" height="30">
<tiles:insert attribute="footer"/></td>
</tr>
</table>
</div>
</body>
</html>
what you could do is float your container div and inside that place your content div after the content div closes and before the closing of the container div, add a css class which has a style property of clear:both; this will solve your problem...
cheers.
