How to stick footer to bottom (not fixed) even with scrolling

footer at bottom of page but not fixed
keep footer at bottom of page when scrolling
how to fix footer at bottom of page with css
push footer to bottom
footer not sticking to bottom
react sticky footer
floating footer
bootstrap footer not at bottom

I'm learning web development and I simply can't figure out what I'm doing wrong on this. I want the footer of this page to stick to the bottom, below all content, but not fixed in the screen. The problem is that when the body has more than 100% of height, the footer stay in the middle of the screen, and not in the bottom.

I've seen a lot of tutorials on how to achieve this, using "position: absolute" + "bottom: 0" and stuff, but everything failed.

Check it out:

<html>
<head>
    <meta charset="iso-8859-1" />               
    <link rel="stylesheet" type="text/css" href="index.css" />
    <link href='https://fonts.googleapis.com/css?family=Arvo|Open+Sans|Ubuntu+Roboto' rel='stylesheet' type='text/css'>
    <title>Matheus's Page</title>
</head>
<body>
    <div id="wrapper">
        <header>
            <div class="title-div">
                <h1>Title</h1>
            </div>

            <nav>
                <ul>
                    <li><h3>Home</h3></li>
                    <li><h3>Articles</h3></li>
                    <li><h3>Perfil</h3></li>
                    <li><h3>Settings</h3></li>
                </ul>
            </nav>
        </header>
        <div id="body">
            <p>Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste </p>
        </div>
        <footer>
            <p>Footer</p>
        </footer>
    <div>
</body>

CSS:

body {
    font-family: 'Arvo', serif;
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper {
   min-height:100%;
}

header {
    position: absolute;
    float: top;
    width: 100%;
    height: 8%;
    background-color: #424242;
    color: #FFD740;
}

.title-div {
    position: absolute;
    height: 100%;
    margin: auto 5%;
    padding-right: 3%;
    border-right: solid 2px #FFD740;
}

header nav {
    position: absolute;
    width: 75%;
    left: 15%;
}

header ul {
    list-style: none outside none;
}

header ul  li{
    display: inline-block;
    margin: auto 2% auto 0; 
}

#body {
   padding:10px;
   padding-top:8%;
   padding-bottom:15%;   /* Height of the footer */
}

footer {
    position: absolute;
    width: 100%;
    height: 15%;
    right: 0;
    bottom: 0;
    left: 0;
    color: #FFD740; 
    background-color: #424242;
    clear: both;
}

link to printscreen of the result

This is my first webpage, and again, I've searched the web and found many solutions, but couldn't managed to get any working. Also, sorry for my English, it isn't my native language.


I think this might help you.

Just showing you the way how to achieve what you want.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#header {
  background: #ededed;
  padding: 10px;
}
#content {
  padding-bottom: 100px;
  /* Height of the footer element */
}
#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
}
<div id="wrapper">

  <div id="header">
  </div>
  <!-- #header -->

  <div id="content">
  </div>
  <!-- #content -->

  <div id="footer">
  </div>
  <!-- #footer -->

</div>
<!-- #wrapper -->

CSS Sticky (But Not Fixed) Footer • Chris Bracco, We need the footer to stick to the bottom of the page without using JavaScript or My first instincts led me to the position: fixed; property, but it turns out the even if the content above it is too short to push it to the bottom of the  The footer should be visible if the content above it is shorter than the user’s viewport height. If the content is taller than the user’s viewport height, then the footer should disappear from view and rest at the bottom of the page, as it would naturally. This must be done without JavaScript,


The accepted answer might be a bit outdated since we have Flexbox now. Give the container a min-height: 100vh and the footer a margin-top: auto so you don't have to deal with absolute positioning and fixed heights.

body {
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background-color: #FFCCCC;
}

.content {
    background-color: #CCFFCC;
}

.footer {
    background-color: #CCCCFF;
    margin-top: auto;
}
<div class="container">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
</div>

Sticky Footer, Five Ways, The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. fixed; which can be used to “stick” an element in place even if the page scrolls. Or, even more confusingly, it's not position: sticky; either, which is liked fixed  It works when we sticky the footer at the bottom of the page, and the footer will always stay at the bottom of the page even content is less or more. But the sticky isn’t required always. If the page has good enough content to the full fill the content area according to screen size, then you may don’t need to it.


This is what worked for me: When I tried bottom 0 and right 0, there was some annoying bottom margin below the footer which would not go away. I fixed it with top: 100% and position absolute:

body{
height: 100%;
width: 100%;
position: relative;

}

footer{
background-image: linear-gradient(to right, #c10f3f, #010168);
padding: 1em;
width: 100%;
top: 100%;
position: absolute;
}

Stick Footer at Bottom of Page But Not Fixed, Stick Footer at Bottom of Page But Not Fixed. The footer should be visible if the content is shorter than the user's viewport height. If there is enough content and taller than the user's viewport height, then the page pushes the footer lower and should disappear from viewport as it would naturally. We just need a few lines of CSS to make the footer remain fixed at the bottom of the screen. We simply need to apply a fixed position and set that position to 0 pixels from the bottom. Set the width and some other CSS properties to customize the look of the footer.


You may try this styling;

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
header {
    position: absolute;
    float: top;
    width: 100%;
    height: 8%;
    background-color: #424242;
    color: #FFD740;
}
.title-div {
    position: absolute;
    height: 100%;
    margin: auto 5%;
    padding-right: 3%;
    border-right: solid 2px #FFD740;
}

header nav {
    position: absolute;
    width: 75%;
    left: 15%;
}

header ul {
    list-style: none outside none;
}

header ul  li{
    display: inline-block;
    margin: auto 2% auto 0; 
}
footer {
    height: 100px;
    padding-top: 15px;
    padding-left: 15px;
    color: #FFD740; 
    background-color: #424242;
}

Here is a demo

css footer not displaying at the bottom of the page, How do I fix the position of the footer in CSS? <header></header> <main></main> <footer></footer> If I make my footer position:fixed it does stay at the bottom of the page, but is a "sticky" footer and covered content when scrolling is needed. I would like to keep the footer at the bottom, but not be fixed. Is this even possible to do with pure css? Fiddle


the answer posted by @divy3993 works but sometimes making footer absolute keeps it stranded on the middle of the page. Atleast that's what had happened to me. So I made a small change, I'll post it below

#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: relative; //make relative instead of absolute
  bottom: 0;
  left: 0;
}

How to Create Fixed Header or Footer Using CSS, the top and bottom property to place the element on the top or bottom of the viewport accordingly. I want a fixed height for the sticky footer, and the wrapper height to be dynamic. Sorry if I wasn't specific enough – Dexygen Oct 13 '11 at 0:01 Ok, I see how even in my revised question, I missed your html/body overflow:hidden, so that takes care of the issue of two scrollbars on the right.


How to keep your footer where it belongs ?, For a quick fix, you can absolutely position the footer at the bottom of the 'stuck' to the bottom of the viewport, whether we want it to or not. Overflow: hidden is needed, because on narrower viewport footer content could overflow, which will look bad, since Vinicius proposes we set a fixed height of the footer matching body bottom margin. For adaptive layouts we can do without overflow:hidden, compensating with media queries and sizing footer content appropriately instead. Or even


Keep that damn footer at the bottom - ZERO, This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately  Then set height: 100% to html and body (actual body, not your #body div) to ensure you can set minimum height as a percentage on child elements. Now set min-height: 100% on the #holder div so it fills the content of the screen and use position: absolute to sit the footer at the bottom of the #holder div.


Keeping Footer at the Bottom of the Page (HTML & CSS), Learn how to keep the footer at the bottom of the page, even if the but not fixed, will be Duration: 12:23 Posted: Mar 10, 2019 The footer would then stay in it's place at the bottom of the content, appearing to always be centered. If you want the scroll bars to not be above the footer, you can probably do something fancy with a div and some css, such as put an empty div the size of the footer below the wide content and make the real footer have top: -(the footer's height)