Home > DeveloperSection > Forums > how to make the min-height of body equal to screen.height
Tanuj Kumar

Total Post:134

Points:940
Posted on    June-15-2013 3:20 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1107  View(s)
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..



AVADHESH PATEL

Total Post:604

Points:4228
Posted on    June-15-2013 3:48 AM

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

Don't want to miss updates? Please click the below button!

Follow MindStick