Explain how HTML5 places footer at the bottom of the page (CSS + JS)


This paper introduces the method of putting footer at the bottom of the page (CSS + JS) in HTML5 and shares it with you as follows:


<script type="text/javascript">
        function footerPosition(){
                // Full text height of web pages
                var contentHeight = document.body.scrollHeight,
                // Visual window height, excluding browser Top Toolbar
                winHeight = window.innerHeight;
            if(!(contentHeight > winHeight)){
                // When the height of the web page body is less than the height of the visual window, add the class fixed-bottom for footer
            } else {


.fixed-bottom {
    position: fixed;
    bottom: 0;

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.

Recommended Today

Implement a webpack loader and a webpack plugin

loader Definitions on the official website: Loader is a converter used to convert source code. for examplebabel-loaderES6 code can be converted to Es5 code;sass-loadertakesassCode conversion tocsscode. The configuration code of general loader is as follows: module: { rules: [ { test: /\.js$/, use: [ //The loader is executed from bottom to top { loader: path.resolve(‘./src/loader2.js’), […]