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
:
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;
}
Related Topics
Download Attribute in <A> Tag Doesn't Work When File Url Called from Sub Domain
How to Place Two Divs Next to Each Other
What Methods of 'Clearfix' How to Use
What Do Commas and Spaces in Multiple Classes Mean in Css
Targeting Only Firefox With Css
Reset CSS Display Property to Default Value
Difference Among Col-Lg-*, Col-Md-* and Col-Sm-* in Bootstrap
Select Element Based on Multiple Classes
Change Opacity on All Elements Except Hovered One
Css Change Button Style After Click
Want My Button to Remain Dark When Clicked
Why Can't an Element With a Z-Index Value Cover Its Child
Difference Between Display: Inline and Display: Inline-Block
Transparent Text Cut Out of Background
Css Reset - What Exactly Does It Do
How to Identify Unused CSS Definitions from Multiple CSS Files in a Project