CODEWITHSUNDEEP
htmlcss
user1622951
user1622951

Reputation: 121

CSS Footer Issue

You know how sometimes when you're low on content, and then footer stands right under the content? Instead of sticking it to bottom using fixed position, or else, Why not make everything under footer, be the same color as the footer's background (without changing the body background, if possible). Also, to use 100% as height, so it's dynamic.

For example:

BEFORE: http://gyazo.com/801af7d0c1c797900ca00648cc82443e AFTER: http://gyazo.com/5cb8503f122107d83a01ddae2c7fbc2a How do I do so? Thanks!

Upvotes: 0

Views: 79

Answers (3)

Christoffer Helgelin Hald
Christoffer Helgelin Hald

Reputation: 581

I usually let the body of the page have the color which you want below the footer. Then let a container (with 100% width) have the actual page color. To avoid "flicker" or a black page (depending on color offcourse) I add this to the container:

#container {
background-color: white; /* Page color */
min-height: 600px;
overflow:auto;
}

Upvotes: 0

kainaw
kainaw

Reputation: 4334

You can make the page have the background color of the footer, like:

body { background: blue; }
div.footer { background: blue; }

Then, you want your main content div to have a good color, like white:

div.content { background: white; }

Upvotes: 0

Terry
Terry

Reputation: 66228

Use CSS sticky footer to ensure that the footer sticks to the bottom of the viewport when there is not enough content to fill the page - http://ryanfait.com/sticky-footer/

Upvotes: 1

Related Questions