HOW TO MAKE THE MIN-HEIGHT OF BODY EQUAL TO SCREEN.HEIGHT

Tanuj Kumar

Total Post:134

Points:940
Posted by  Tanuj Kumar
 1391  View(s)
Ratings:
Rate this:
Hi Expert,

My Website here I have a page About Us due to lack of content we can not cover the complete height of the screen. And my footer starts floating in the air.. I tried doing it using min-height in a fieldset but unfortunately it works on my browser only as soon as I change my browser or try on other system the problem start again... I have tried:

CSS

html,body{  
min-height:100%;  
height:100%;  
}  
[id]center_wrapper{  
min-height:100%;  
height:100%; 
}  
Javascript

var body1 = document.getElementsByTagName('body')[0];  
console.log(body1);  
body1.style.minHeight = screen.height;  
body1.style.height = screen.height;  
console.log(body1.style.minHeight);  

jQuery

$('body').css('min-height', screen.height);  
$('body').css('height', screen.height);  
console.log(document.getElementsByTagName('body')[0].style.minHeight);  

While using both jQuery and javascript Console Log it does shows 704px but it is not 704px.. I guess it might be because change occurs after DOM is created..

Any help..

  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: how to make the min-height of body equal to screen.height

    Hi Tanuj,


    Alright, since that didn't work... You have an html element style found in your div id "center_wrapper" it is contained within div id "title". Change the element style of min-height to 450 as shown below:

    <fieldset id="center_wrapper" style="min-height: 450px;">

    That should do the trick...

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!