Web design: Pinning footer to the bottom of the browser

When designing a website, if the content of your page is not full screen, then your footer will be far from the bottom of the browser, the overall look is ugly, here in JavaScript provides a way to pin footer to the bottom of the browser.

Function Fixfooter () {
    var mainheight = document.getElementById (' main '). offsetheight;
    var  height = document.documentElement.clientHeight
                          -document.getElementById ("header"). offsetheight
                         - document.getElementById ("Footer"). offsetheight;
    if (mainheight  < height) {
        document.getElementById (' main '). style.height= height + "px";
   }
}

Where main is the id,header of your Web content is the Id,footer of the menu is the footer ID. When the site content height is less than how much, then get the header and footer height, and document.documentElement.clientHeight minus them, the rest is the height of main.
But when you run the code, you will find that footer first a little distance from the bottom, and then to the bottom, so it looks ugly, you can add the following statement to hide the process, so that the page opened footer on the bottom.

document.getElementById (' main '). style.overflow= "hidden";

We can get a lot of browser-related properties through JavaScript, which lists the properties of each property and what it means.
Web page Visible area width: document.body.clientWidth
Web page Visible Area height: document.body.clientHeight
Web page Visible Area width: document.body.offsetWidth (including edge width)
Web page Visible Area High: document.body.offsetHeight (including edge height)
Page body Full text width: document.body.scrollWidth
Page body Full text High: Document.body.scrollHeight
Page is rolled away High: document.body.scrollTop
Webpage is rolled away left: document.body.scrollLeft
Page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of screen resolution: Window.screen.width
Screen available work area height: window.screen.availHeight
Screen available work area width: window.screen.availWidth

Of course, if you want to keep footer at the bottom of the browser, you can use CSS to solve

#footer{ 　　 position : fixed ; 　　 right : 0 ; 　　 left : 0 ; 　　 z-index : 1030 ; 　　 bottom : 0 ; 　　 margin-bottom : 0 ; }So footer will always be at the bottom of the browser.

Here's another way to do this: completely through CSS.

< footer class = "footer" >        < div class = "container" >          < p class = "text" >版权所有，翻版不究! https://www.iteblog.com</ p >        </ div > </ footer >Here's the CSS: html {    position : relative ;    min-height : 100% ; } body {    margin-bottom : 60px ; } .footer {    position : absolute ;    bottom : 0 ;    width : 100% ;    height : 60px ;    background-color : #f5f5f5 ; } .container {    width : auto ;    max-width : 680px ;    padding : 0 15px ; } .container .text {    margin : 20px 0 ; }

Web design: Pinning footer to the bottom of the browser