Footer needs to stick to bottom when content is less

Question

I have an aspx page in which I have less content, due to that my 'footer' is not sticking to bottom.

Please find html code for this

 <div style=" background: #eae8e7;
border-top: #d30000 4px solid;
min-height: 80px;
position: relative;
right: 0px;
bottom: 1px;
left: 0px;
margin-right: auto;
margin-left: auto;">

Please find css which i used :

.footer {
        width: 100%;
        padding: 0 0;
        margin: 0 auto;
        background: #eae8e7;
        border-top: #d30000 4px solid;
        bottom: 0px;
        position: inherit;
        clear: both;
    }

If you want to do that with CSS only, and not using `position:fixed` then this is what you need http://ryanfait.com/sticky-footer/ — wf4, Jan 16 '15 at 13:42
@wf4: Not like that, you can suggest any way to achieve that — , Jan 16 '15 at 13:44

nifCody · Accepted Answer · 2015-01-16T15:41:52.470

5

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

html {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 4rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}


footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

<footer>This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</footer>

Try this change the position as fixed

edited Jan 16 '15 at 15:41

answered Jan 16 '15 at 13:53

nifCody

2,394
3
34
54

this is fine but i dont want it to be as a position fixed. – Jan 16 '15 at 14:02
why don't you use the frameworks like bootstrap or something – nifCody Jan 16 '15 at 15:35
I have edited my code now just try – nifCody Jan 16 '15 at 15:46
It does not work for me in safari at iphone 10.* – Luis Saraza Apr 10 '18 at 19:55

Firedrake969 · Answer 2 · 2015-01-16T13:51:08.557

1

.footer {
    position:absolute;
    left:0;
    bottom:0;
    height:17px;
    width:100%;
    background-color:black;
}

As long as html is position:relative, this works. No need for wrappers or anything like that :)

edited Jan 16 '15 at 13:51

answered Jan 16 '15 at 13:43

Firedrake969

763
8
22

After using this code, i get this issue, please find the url of Screenshot :http://www.imagesup.net/?di=014214164269 – Jan 16 '15 at 13:55
Is your `html {position:relative;}`? – Firedrake969 Jan 16 '15 at 13:56
No i have no position for main div and your given code is not working – Jan 16 '15 at 14:00
Can I see the general layout of your HTML and CSS? This should work based on the fact that it's always worked for me. Your HTML element itself needs to be position:relative – Firedrake969 Jan 16 '15 at 14:02
Actually i m using aspx and user control for webpage and my footer is added in User contol – Jan 16 '15 at 14:08
Well, is your website in HTML? I'd assume so... I mean the actual code, not the page. – Firedrake969 Jan 16 '15 at 16:04
NO, I have 'aspx' page – Jan 17 '15 at 05:46
But is your page's code in HTML? It obviously is, since you used a div tag in your question... :/ – Firedrake969 Jan 17 '15 at 18:03
Well position relative is not working for me when content is less in other page footer comes up – Shivam Suchak May 25 '21 at 13:49

score 1 · Answer 3 · answered Jan 16 '15 at 14:07

<!doctype html>
<html lang="en">
<head>
    <style>
        html,body{
            height: 100%;
            margin: 0px;
        }
        #container{
            min-height: 90%;
            background-color: #f00;
        }
        #footer{
            min-height: 10%;
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div id="container">
        it's the container
    </div>
    <div id="footer">
        it's the footer
    </div>
</body>
</html>

Footer needs to stick to bottom when content is less

3 Answers3

Linked