Footer Placement

HTML & CSS
23

whoa my mistake I meant sticky footer.

25

Do you mind elaborating a little more on how it works? The only thing I understand is you are using display table
method.

26

First, the HTML/BODY elements are set to 100% height, which will be useful (necessary) in order to give hte #wrap outer element 100% height as well. #wrap will hold our entire page so by having it be 100% height like it is, it will be the foundation for us to make use of a sticky footer.

Now, there is a header, content section, and a footer. If you think of tables, you know that columns are vertical, rows are for horizontal, and cells are inside the rows.

Due to the way Paul has this set up, he has 3 “rows”, which in turn, means 3 table rows. So the header, content section, and footer are all set to be a table row, and the header/footer are set to 1px height which, for table items, means it will basically act as a min-height. Thus not being taller than needed (tables try to give equal dimensions when possible. You’ve probably noticed this about tables.)

Due to the fact that the header/footer are set to 1px height, that means the content sections responsibliity will be to fill up the other (100%-header-footer) height. Remember, the #wrap element is display:table and 100% height which means that it is, at a minimum, going to be 100% height. The header/footer will shrink wrap and that leaves the content section to take on as much content area as possible.

Does that leave you with any questions?

3 Likes
27

Did you download and try the file that I posted in #19 ?

1 Like
28

Well explained :slight_smile:

2 Likes
29

yeah its all good now thanks.

30

I noticed that when I remove content from my page my footer does not stay
fixed at the bottom it moves up whenever I remove content. Do I still have a fixed footer
even if this happens? WEBSITE

For example:

1272×676 149 KB

31

The footer itself is still fixed. The blue never leaves the base of the page. This is still a fixed footer (from that behavior). Take your webpage and zoom it out as far as you can go. The footer still sticks to the bottom of the viewport.

Do you not like the content not sitting alongside the bottom edge?

32

I see so the concept of the fixed footer is for the baseline to stick to the bottom?

Naw I dont mind that it just that I thought it was not fixed because the footer moves
up whenever I remove content in the page.

33

But it’s still at the foot of the page, even if the page doesn’t extend to the bottom of the view-port.

I don’t know a way to force a footer at view-port bottom (it was never important for me to have one) but if it’s possible I’m sure someone here will have ideas.

34

It moves up because there is less content and due to the sticky method, that’s what you can expect to happen.

It’s not technically “moving” up, in the sense that it’s physically moving. It’s just expanding to make up for the less content in the main section. It’s still fixed.

1 Like
35

Almost. Add the small height to the footer:

footer {
    background-color: #1d4589; 
    display: table-row;
    height: 1px;  /* ADD ME */
    width: 100%;
}
1 Like
36

As Ron said you need to collapse the height in the footer otherwise it just stretches as all rows in a table will stretch to the height of the table.

When you set 1px height on the footer this ensures that the footer will only be as tall as its content (because height is treated as a minimum on table-cells) and that means the other rows in the table take up the slack and the footer sticks to the bottom.

2 Likes
37

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.