In the case of no more than one screen, when the browser window is smaller, the footer text will float upward but remain at the bottom. webjx.com
When the content is more than one screen, he displayed at the bottom of the page, not the bottom of the window; test, also can, in IE6, IE7, FF and so there is no problem! When the window shrinks, there is no problem!
The first is the JS script:
function Test () {
var infoheight = document.getElementById ("info"). scrollheight;
var bottomheight = document.getElementById ("bottom"). ScrollHeight;
var allheight = document.documentElement.clientHeight;
var bottom = document.getElementById ("bottom");
if ((Infoheight + bottomheight) < Allheight) {
Bottom.style.position = "absolute";
Bottom.style.bottom = "0";
}else{
Bottom.style.position = "";
Bottom.style.bottom = "";
}
settimeout (function () {test ();},10);
}
Test (); Web Teaching Network
To view the effects of a run:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<meta http-equiv= "Content-type" Content= "text/html; Charset=utf-8 "/>
<title>css instance: keep the footer at the bottom of the page not full screen </title>
<style>
*{margin:0; padding : 0}
#info {background: #33CCFF}
#bottom {background: #FFCC00; width:100%}
</style>
<body>
<div id= "info"
2<br/>2<br />2<BR/>2<br/><br/>2<br/>2<br/>2<br/>2<br/>2<br/><br/ >2<BR/>20000</div>
<div id= "Bottom" >BOTTOM</DIV>
<script language= " JavaScript "type=" Text/javascript
Function Test () {
var infoheight = document.getElementById ("info" ). scrollheight;
var bottomheight = document.getElementById ("bottom"). scrollheight;
var allheight = document.documentElement.clientHeight;
var bottom = document.getElementById ("bottom");
if (infoheight + bottomheight) < Allheight) {
bottom.style.position = " Absolute ";
Bottom.style.bottom = "0";
}else{
bottom.style.position = "";
Bottom.style.bottom = "";
}
settimeout (function () {test ();},10);
}
Test ();
</script>
</body>
&NBSP;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
