Function: whether the browser is dragged up or down, the footer DIV block is kept at the bottom of the page.
1. Write Javascript code and DIV/CSS code in the same file:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> keep the footer at the bottom of the page below the screen </title>
<! -- DIV block CSS -->
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
# Top {background: #33 CCFF; text-align: center ;}
# Bottom {background: # FFCC00; text-align: center; width: 100% ;}
</Style>
</Head>
<Body>
<Div id = "top"> top </div>
<Div id = "bottom"> bottom </div>
<! -- Javascript code is written at the end to facilitate the code to read relevant information after the top and bottom DIV blocks are fully loaded. -->
<Script language = "javascript" type = "text/javascript">
Function calcDistance (){
Var topHeight = document. getElementById ("top"). scrollHeight;
Var bottomHeight = document. getElementById ("bottom"). scrollHeight;
Var allHeight = document.doc umentElement. clientHeight;
Var bottom = document. getElementById ("bottom ");
If (topHeight + bottomHeight) <allHeight ){
Bottom. style. position = "absolute ";
Bottom. style. bottom = "0 ";
} Else {
Bottom. style. position = "";
Bottom. style. bottom = "";
}
SetTimeout (function () {calcDistance () ;}, 10 );
}
CalcDistance ();
</Script>
</Body>
</Html>
Effect: When two DIV blocks are not intersection:
When the two DIV blocks overlap, there is no coverage (often when the second bottom is set to 0 ):
2. write Html, DIV/CSS, and Javascript in different files:
Htmlfile index.html (index.js and index.css are used in the Link ):
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> keep the footer at the bottom of the page below the screen </title>
<Link href = "index.css" rel = "stylesheet" type = "text/css"/>
<Script type = "text/javascript" language = "javascript" src = "index. js"> </script>
</Head>
<Body>
<Div id = "top"> top </div>
<Div id = "bottom"> bottom </div>
<Script language = "javascript" type = "text/javascript">
CalcDistance ();
</Script>
</Body>
</Html>
Index.css file:
@ Charset "UTF-8 ";
/* CSS Document */
*{
Margin: 0;
Padding: 0;
}
# Top {
Background: #33 CCFF;
Text-align: center;
}
# Bottom {
Background: # FFCC00;
Text-align: center;
Width: 100%;
}
Note: It is best to give the height of the top and bottom DIV blocks to facilitate javascript code calculation. In some cases (for example, when the top block contains other DIV blocks, may cause inaccurate computation in Some browsers)
Index. js file:
// JavaScript Document
Function calcDistance (){
Var topHeight = document. getElementById ("top"). scrollHeight;
Var bottomHeight = document. getElementById ("bottom"). scrollHeight;
Var allHeight = document.doc umentElement. clientHeight;
Var bottom = document. getElementById ("bottom ");
If (topHeight + bottomHeight) <allHeight ){
Bottom. style. position = "absolute ";
Bottom. style. bottom = "0"; // if an error occurs when you set a distance from the bottom of the image, try
} Else {
Bottom. style. position = "";
Bottom. style. bottom = "";
}
SetTimeout (function () {calcDistance () ;}, 10 );
}
3. If you want the minimum distance between the DIV block on the bottom bar and the last DIV block on it to A (assuming 150px), modify the index. js file as follows:
// JavaScript Document
Function calcDistance (){
Var topHeight = document. getElementById ("top"). scrollHeight;
Var bottomHeight = document. getElementById ("bottom"). scrollHeight;
Var allHeight = document.doc umentElement. clientHeight;
Var bottom = document. getElementById ("bottom ");
If (topHeight + bottomHeight + 150) <allHeight ){
Bottom. style. position = "absolute ";
Bottom. style. bottom = "0 ";
Bottom. style. top = "";
} Else {
Bottom. style. position = "relative ";
Bottom. style. bottom = "";
Bottom. style. top = "150px"; // It is 150 pixels away from the previous DIV block. If 150px cannot reach the expected result, try 150 (remove px)
}
SetTimeout (function () {calcDistance () ;}, 10 );
}
(When the distance between two DIV blocks is less than 150 pixels, the vertical scroll bar appears ):
From film cloud drifting