CODEWITHSUNDEEP
htmlcss
Michaela LeBlanc
Michaela LeBlanc

Reputation: 259

How do I use the Sticky Footer CSS?

I've taken a look at the sticky footer CSS and have tried to make changes to my CSS so I could get this concept but no luck as I can't change html & body to 100% height.

Here's the sticky footer CSS that I'd like

And here's the link to my web page that I'd like it on

& Here's my CSS

/* Main content styles */

body {
font-family: Helvetica Neue: Regular;
}

html, body, div, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
}

/* Container */
#container {
margin: 0 auto;
width: 960px;
}

/* Content */
#content {
width: 642px;
float: right;
padding: 20px 0 0 0;
}

#content h1 {
padding: 0 0 20px 0;
margin: 0 0 20px 20px;
border-bottom: 1px solid #94b9c4;
}

.article {
    padding: 5px 20px;
}

.articleimg {
    float: left;
    padding: 0 25px 0 0;
}


/* Footer */
#footer {
     text-align: left;
     position: relative;
 width: 642px;
 float: right;
 clear: both;
}

   #footer p {
           font-family: Helvetica Neue: Regular;
       font-size: 12px;
           color: #94b9c4;
           padding: 10px 0 0 0;
           margin: 0 0 20px 20px;
           border-top: 1px solid #94b9c4;
   }

Upvotes: 1

Views: 1201

Answers (3)

Yilmaz
Yilmaz

Reputation: 49341

on your page, keep as the child of the body. for example:

<body>
    <div class="main"> 
        <p>"paragraph"</p>
    </div>
    <footer>
        <p>Created by </p>
    </footer>
</body>

in css file

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

.main {
  flex-grow: 1;
}

Upvotes: 0

insertusernamehere
insertusernamehere

Reputation: 23580

Even though this footer you use in your question will work, let me show you another way, that uses less code in both CSS and HTML. This will create a footer, that is sticky to the bottom of the viewport or the content, depending which is longer. So this one is not fixed.

HTML

<body>
    <h1>Any content without the need of a wrapper</h1>

    <footer></footer>
</body>

CSS

html {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    /* the margin compensates the footer's height plus and margin if you want one */
    margin: 0 0 100px 0;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}

Demo

Try before buy

Upvotes: 0

Matthew R.
Matthew R.

Reputation: 4350

The only code that is important when using a sticky footer with CSS is the position attribute for the footer. In the HTML, make sure that the footer div is a child of the body:

HTML

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

The reason it needs to be a child of the body is because position in CSS is based on the positioning of its closest ancestor. If you position the footer absolutely within another <div> than you always have to be cognizant about that containers position. Anyway, the CSS should be like so:

CSS

.footer {
    position: fixed;
    bottom: 0;
    left: 0; // remove this if you have a specified width for the footer
    right: 0; // remove this too
    height: 100px; // you can change this
}

The previous code should create a footer that spans the whole bottom of the page with 100px height. This will stick the footer to the bottom of the page no matter what. However, you must also keep in mind that this footer will need to be accounted for so that it does not cover your content. I typically will add a padding on the bottom of my content area roughly the same as the height of my footer. Hope this helps!

Upvotes: 1

Related Questions