Footer At Bottom of Page or Content, Whichever Is Lower

Footer at bottom of page or content, whichever is lower

Ryan Fait's sticky footer is very nice, however I find its basic structure to be lacking*.

Flexbox Version

If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, and support a dynamically sized footer.

The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes is a full-height wrapper element with display: flex and at least one sibling with a flex value greater than 0:

_CSS:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

html,body {  height: 100%;  margin: 0;  padding: 0;}#main-wrapper {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;      -ms-flex-direction: column;          flex-direction: column;  min-height: 100%;}article {  -webkit-box-flex: 1;      -ms-flex: 1;          flex: 1;}header {  background-color: #F00;}nav {  background-color: #FF0;}article {  background-color: #0F0;}footer {  background-color: #00F;}

<div id="main-wrapper">   <header>     here be header   </header>   <nav>   </nav>   <article>     here be content   </article>   <footer>     here be footer   </footer></div>

Footer needs to stick to bottom when content is less

*,*:before,*:after {  -webkit-box-sizing: border-box;  -moz-box-sizing:    border-box;  box-sizing:         border-box;}
html {  height: 100%;}
body {  position: relative;  margin: 0;  padding-bottom: 4rem;  min-height: 100%;  font-family: "Helvetica Neue", Arial, sans-serif;}

footer {  position: absolute;  right: 0;  bottom: 0;  left: 0;  padding: 1rem;  background-color: #efefef;  text-align: center;}

<footer>This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</footer>

How to allows make footer on the bottom but not letting it cover content

Hii Fire Lost check this solution. in this solution, I have set header and footer position: relative and both elements will be display top of the page and bottom of the page

you need to set fix height in the main tag. I have used 80px of header and 60px of the footer.
i have applied this min-height: calc(100vh - 140px); css in wrapper element.
if this answer is valuable for you. plz upvote me.

<html> 
  
<head> 
    <style> 
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        header {
            position: relative;
            height: 80px;
            width: 100%;
            background: #333333;
            text-align: center;
            font-size: 22px;
            color: #fff;
            padding: 25px 0;
        }

        main {
            position: relative;
            min-height: calc(100vh - 140px);
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        footer {
            position: relative;
            height: 60px;
            width: 100%;
            background: #333333;
            text-align: center;
            font-size: 22px;
            color: #fff;
            padding: 18px 0;
        }
    </style> 
  
    <head> 
  
        <body> 
            <header><p>Header</p></header>
            <main><p>Body Content</p></main>
            <footer><p>Footer</p></footer>
        </body> 
        <html>

Force Bootstrap's variable height footer to the bottom of page or content, whichever is lower

You can use flexbox to achieve sticky footer.

Using flex: 1 0 auto; to section will make it flexible, it will acquire all available free space in flex-container.

flex: <positive-number>

Makes the flex item flexible and sets the flex basis to zero,
resulting in an item that receives the specified proportion of the
free space in the flex container. If all items in the flex container
use this pattern, their sizes will be proportional to the specified
flex factor.Equivalent to flex: 1 0.

html,body {  margin: 0;  padding: 0;}
html {  height: 100%;}
body {  min-height: 100%;  display: flex;  flex-direction: column;  height: 1px; /* Height hack for IE */}
header,footer {  padding: 10px;  color: white;  background-color: #000;}
section {  flex: 1 0 auto; /* This will make section flexible */}

<header>Header</header><section></section><footer>Footer</footer>

Footer is not aligning to the bottom of the page

UPDATED

I did modify some of your CSS, you can check it out here

https://jsfiddle.net/wmLvqyj4/3/

For the mobile's screen size, it's too small for your form but tablet and desktop's are good

OLD ANSWER

I cannot run your CSS properly but can suggest you to do this way https://jsfiddle.net/479dnqy2/1/

Usually, a page footer is a static content, so we briefly know its height. You can set your page content's height with this formula your content height = full page height - footer height

.page-content {
  min-height: calc(100vh - 10rem); /*10rem is the size of footer*/
}

.page-footer {
  height: 10rem; /*the fixed height of the footer*/
}

Position footer to bottom of window or page, whichever is larger

You first need to have a container div just after the which contains all the content

.container
{
min-height:100%;
position:relative;
margin:0 auto;
}

.footer{
position:absolute;
bottom:0;
}

Footer At Bottom of Page or Content, Whichever Is Lower