DIV Height Extension
August 28, 2013 by AdminHow we can extend the height of DIV by adding data automatically?
You may face this problem if you designed a website without table tag, and by adding data to that specific DIV it has been overlapped on your footer or in other content.
In CSS we have the class:
.class{
clear:both;
}
but it doesn’t work all the time and you don’t get the result, now solution is in jQuery’s hands as below:
For DIV Automatic Height Extension use this script after your CSS link:
You may kindly use the link as it won’t get deleted from the site.
<script type=”text/javascript” src=”http://www.heliastar.net/js/jquery-1.7.2.min.js”> </script>
Add the jQuery tag after your body tag opens, you may use it in the head as well but it may not work but you can test:
< script>
$(window).ready(function() {
if($(document).height() > $(‘#heliastar’).height()) { $(‘#heliastar’).height($(document).height() – 250) }
})
< /script>
What is id=”heliastar” is the DIV that you want to be extended according to the other content extension.
Number – 250 is a kind of margin from that specific DIV to the next element in the page, according to your content and design you can play with that number.
Latest comments