I have checked the other similar question asked by CodersSC which did not help. It'd be very helpful if any of you can take a look at this.
I used object tag to load a php page inside my page. The problem is, when the div (which contains the contents of the other page) grows more than 100%, it is scroll-able instead of growing more than the given height. the following is my html portion.
content.html
<div class='content'>
<p>...</p>
<hr class="gh" style="margin-left:0px; margin-top:3px;">
<object class="comm" data="comments.php?id=1"></object>
</div>
contentcss.css
.content {
background-color: #333;
margin: 2% auto;
padding: 22px 40px ;
width: 1200px;
height: auto;
}
.comm {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
i also tried the following in comm class inside my css:
.comm {
position: relative;
width: 100%;
min-height: 100%;
height: auto;
overflow: hidden;
}
^this makes the div smaller for some reason.