DIV Height Extension

August 28, 2013 by Admin

How 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.


Pin It


Latest comments

Comments are closed.


Listen, discuss, create. We make your website as unique as you.

Heliastar is a full-service design and development website dedicated to consistently providing high customer satisfaction by rendering excellent service, quality products, and furnishing an enjoyable atmosphere at an acceptable price/value relationship.

You can be assured that our friendly approach to web design and hosting does not mean that you have to compromise on price or quality.

Contact Us

Around the block ..

Phone +1 813 964 74 75

Email info{@}heliastar.net

Why Us?

• Highly Experienced in Web Design

• Experts in Web Development

• Experts in Server Administration

• 24/7 Email & Phone Support

• Cost-effective Approach

• Customer Support Plans

• High quality Servers (Linux & Windows)

• Free Consultation

• Free Staff Training

Recent Bolg Posts Recent CommentsCategories
Tag Cloud

© 2006 - 2017 Heliastar Design & Development , All Rights Reserved.