3 Replies - 360 Views - Last Post: 13 December 2014 - 05:06 PM

#1 lopezzj1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 13-December 14

Making my content reach the bottom of the page

Posted 13 December 2014 - 04:50 PM

Hello! So I'm making a website where the content is at the center of the page. Here's what it currently looks like: http://i.imgur.com/pPULL9s.png. (This is a screenshot btw) However, when I open the website in a computer with a bigger screen, the footer doesn't go all the way down. How do I make sure that my content always reaches the bottom of the page, no matter the size of my content?

Is This A Good Question/Topic? 0
  • +

Replies To: Making my content reach the bottom of the page

#2 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6341
  • View blog
  • Posts: 25,586
  • Joined: 12-December 12

Re: Making my content reach the bottom of the page

Posted 13 December 2014 - 04:56 PM

Post relevant HTML and CSS here (between code tags) a screenshot alone is of limited use.

A CSS Sticky Footer that just works
Was This Post Helpful? 0
  • +
  • -

#3 lopezzj1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 13-December 14

Re: Making my content reach the bottom of the page

Posted 13 December 2014 - 04:58 PM

article {
    background-color: rgba(255, 255, 255, 0.95);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    max-width: 800px;
    font-family:'Open Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
    font-weight: 300;
}

.info {
    padding: 2em;
    padding-bottom: 5em;
}

footer {
    padding-top: 1em;
    padding-right: 1em;
    text-align: right;
    background-color: #4B2E83;
    color: white;
    bottom: 0;
    height: 50px;
    padding-bottom: 60px;
}




Here's a part of my code. The article tag is taking care of the content in the center. It controls the max-width of the content also.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6341
  • View blog
  • Posts: 25,586
  • Joined: 12-December 12

Re: Making my content reach the bottom of the page

Posted 13 December 2014 - 05:06 PM

bottom: 0 will have no affect unless the element is positioned.

The link I posted provides one way to cause a footer to stick to the bottom of the viewport.

This post has been edited by andrewsw: 13 December 2014 - 05:08 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1