CODEWITHSUNDEEP
htmlcss
Constantine1001
Constantine1001

Reputation: 81

Force footer on bottom

Ok i have problem to force footer on bottom when not enough content to push it there naturally.

I partially solved problem. It is rly simple design, i have header, content and footer, all inside div wrapper.

html,
body {

margin:0;
padding:0;
height:100%;
font: sans-serif;
}

#wrapper {
min-height:100%;
position:relative;
}

#content {
padding: 2% 5%;
max-width: 940px;
margin: 0 auto;
padding-bottom:80px; /* Height of the footer element */
clear: both;
background-color: yellow;
}

footer {
background:#ffab62;
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
font-size: 0.75em;
text-align: center;
padding-top: 30px;
clear: both;
color: #ccc;
}

I have used background color to see position of elements on page. So when there is not enough content footer is on bottom and it is OK. When there is more than enough content footer is overlapping some of it, it gets fixed when i put position on footer relative instead of absolute but then on pages where there is not enough content footer is not on bottom.. Fixing one other is not good and fixing that other first page is not good.. Is there any solution that can help me solve this...

Upvotes: 0

Views: 1469

Answers (2)

Lieutenant Dan
Lieutenant Dan

Reputation: 8264

Adjust your min-height: to the minimum value where you want your footer to end up, 100% will put it right below your content (which should be the default anyway without even declaring) which you said isn't long enough; make a minimum-height: 900px; or similar to where you want the minimum end point to be where the footer will live.

If the footer is in the correct place in the HTML but it is floating up. Then consider the below.

display:inline-block;

add to footer.

footer {
   display: inline-block;
}

If these don't work, show your HTML!

Upvotes: 1

Mustafa Yilmaz
Mustafa Yilmaz

Reputation: 67

You nearly did it :)

Your content div is overlaping the sticky footer because of its height. Just use a height: calc(100% - footer_height); and start your content where your header finishes.

This is a JSFiddle example of this usage.

CSS file

html,
body {
    margin: 0;
    height: 100%;
}

.container {
    min-height: 100%;
    position: relative;
}

.header {
    background: #d6d6d6;
    position: absolute;
    height: 80px;
    width: 100%;
    top: 0;
    left: 0
}
.content {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100% - 80px);
    background: yellow;
}
.footer {
    background: #d6d6d6;
    position: absolute;
    height: 80px;
    bottom: 0;
    left: 0;
    width: 100%;
    clear: both;
}

I hope it is useful.

Upvotes: 0

Related Questions