How to push a footer to the bottom

-

 There are several ways. All of them are somewhat similar. The first option is the most relevant.

Option 1

HTML

<html>
    <body>
        <div class="content"></div>
        <footer></footer>
    </body>
</html>

CSS

body, html {
    height: 100%;
}
body{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

Option 2

A footer height must be fixed

HTML

<html>
    <body>
        <div class="content">
            <main class="main"></main>
        </div>
        <footer class="footer"></footer>
    </body>
</html>

CSS

html,body{
    height: 100%;
}
.content{
    min-height: 100%;
}
.main{
    padding-bottom: 200px;
}
.footer{
    height: 200px;
    margin-top: -200px;
}

Option 3

A footer height must be fixed

HTML

<html>
    <body>
        <div class="content"></div>
        <footer class="footer"></footer>
    </body>
</html>

CSS

html,body{
    height: 100%;
}
.content{
    box-sizing: border-box;
    min-height: 100%;
    padding-bottom: 200px;
}
.footer{
    height: 200px;
    margin-top: -200px;
}

Comments

Post a Comment

Popular posts from this blog

Typical gulpfile.js

-
The file is written for Gulp 4 . The file is designed to work with styles ( SCSS ) and JavaScript . All minify and compile sourcemaps for debugging. Third-party scripts and styles are in separate files. const production = ( process.env.NODE_ENV == 'production' ); //base part let {src, dest, parallel, series, watch} = require('gulp'), rename = require('gulp-rename'), sourcemaps = require('gulp-sourcemaps'); //css part let sass = require('gulp-sass'), cleanCSS = require('gulp-clean-css'), autoprefixer = require('gulp-autoprefixer'); const babel = require('gulp-babel'), uglify = require('gulp-uglify-es').default, include = require("gulp-include"); let pathFiles = { build: { css: './css/', js: './js/' }, src: { css: './src/scss/**/*.scss', js: './src/js/**/*.js' } }; function swallowError(error){
Read more

JavaScript Inheritance and Classes

-
In many programming languages implemented inheritance. And it also exists in JavaScript. First, consider prototype inheritance. We describe the function constructor function Animal(name, weight, color){ this.name = name || 'someAnimal'; this.weight = weight; this.color = color; //do some actions during initialization console.log(this.name + ' construct animal'); } // write the method to the prototype Animal.prototype.sayName = function(){ console.log(this.name); } We describe the constructor function that inherits the Animal class. And we will expand it, we will add in addition own properties and methods function Mammal(name, weight, color, limbs){ Animal.apply(this, arguments); this.limbs = limbs || 4; console.log(this.name + ' construct mammal'); } Mammal.prototype = Object.create(Animal.prototype); Mammal.prototype.constructor = Mammal; Mammal.prototype.run = function(){ console.log('run'); } Cre
Read more

Cheat sheet for work with Git

-
The cheat sheet on version control system - Git to see commits git log --pretty=oneline to see remote URL repositories git remote -v to clone into a non-empty directory git init git remote add origin https://name@bitbucket.org/name/rep.git git fetch git checkout -t origin/master an event log git reflog to change a repository git remote set-url origin https://some@bitbucket.org/some/some_st.git a new repository git remote add origin https://some@bitbucket.org/some/test.git git push -u origin master to delete a branch locally git branch -d fix-protobaz to delete a branch on the server git push --delete origin fix-protobaz to remove a file from the index git rm --cached --ignore-unmatch path/file.js to create a new branch git branch some_branch to create a new branch and immediately switch to it git checkout -b some_branch to switch to another branch git checkout some_branch to edit last commit comment git commit --amend -m "new comment" discard last
Read more