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

Time:2019-5-12

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:

JavaScript:

<script type="text/javascript">
    $(function(){
        function footerPosition(){
            $("footer").removeClass("fixed-bottom");
                // 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
                $("footer").addClass("fixed-bottom");
            } else {
                $("footer").removeClass("fixed-bottom");
            }
        }
        footerPosition();
        $(window).resize(footerPosition);
    });
</script>

CSS:


.fixed-bottom {
    position: fixed;
    bottom: 0;
    width:100%;
}

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’), […]