how to make the min-height of body equal to screen.height
Question
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..
5 answers
solution1
5 2014-02-03 17:57:48
Thought I'd add an answer as I was searching for a solution to this problem and found one here , no javascript needed.
Code taken from the linked article:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
The HTML is basic with a wrapper directly inside the body.
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
The key points of the CSS is the wrapper's min-height:100% and the footer being absolutely positioned at the bottom inside it. You need to make sure the html and body elements are styled as specified as well, and give the content some space at the bottom as the footer will cover it.
The footer will stick to the bottom of the window with short content but be pushed beyond it with larger content.
solution2
1 2013-06-15 05:21:56
From my point of view this is a process flow for your problem.
1. GET SCREEN HEIGHT.
var docheight = $(document).height();
alert(docheight);
2. THEN GET TAB MARGIN FROM TOP OF SCREEN BY USING.
var offset = $(this).offset();
var mydivlft = offset.left; // for LEFT margin from screen
var mydivtop = offset.top; // for TOP margin from screen
alert(mydivtop);
3. GET YOUR FOOTER HEIGHT BY USING ITs ID / CLASS.
var footerheight = $('#footer-info').height();
alert(footerheight);
4. NOW SET YOUR TAB VIEW HEIGHT
YOUR TABVIEW_HEIGHT = SCREEN_HEIGHT (minus) FOOTER_HEIGHT (minus) TAB_MARGIN_FROM_TOP
5. CODE
var x = mydivtop+footerheight
var newheight = docheight-x;
6. SET YOUR TAB VIEW HEIGHT
$('#tabs div').height(newheight);
solution3
0 2013-06-15 04:57:15
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...
solution4
0 2013-06-15 05:46:37
Sounds like what you really want is the footer pinned to the bottom of the browser window. Give this a try:
#footer-info {
position: absolute;
bottom: 0px;
}
solution5
0 ACCPTED 2013-06-15 07:03:34
Finally I made it..
What I did is:
1. Got the offset() and height() of the div I wanted to be at the bottom
2. Got the window height()
3. Finally using jQuery css property I got the margin necessary to keep it down
The Code is as:
$(function () {
var x = $('#footer-info').offset();
var z = $(window).height();
var y = $('#footer-info').height();
console.log(y);
if (z > x.top) {
var res = z - x.top - y;
console.log(res);
$('#footer-info').css('margin-top', res);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.