Align the footer at the bottom with variable content height

Asked May 30 '19 at 09:43

Active May 30 '19 at 09:55

Viewed 32 times

So, I am trying to achieve this:

I know this looks like an already asked question but I have tried all the available solutions of stackoverflow.

My current structure is: HTML:

<div class='app'>
    <div class='content'>Content</div>
    <div class='footer'>Footer</div>
</div>

CSS:

.app{
    text-align: center;
    background-color: #1a1f25;
    min-height: 100%;
    width: 100%;
    position: relative;
    overflow-y: auto;
    top: 0;
}
.footer{
    color: lightgray;
    padding: 10px 30px;
    position: absolute;
    width: 100%;
    font-size: 10px;
    background: black;
    bottom: 0;
}

Update: I tried checking the answer given here, but my website is responsive and that answer is for those footers which have fixed height. Which makes it difficult to convert that solution for my usecase.

edited May 30 '19 at 09:55

asked May 30 '19 at 09:43

Aniruddh Agarwal

I tried that also but that didn't work for me. – Aniruddh Agarwal May 30 '19 at 09:48
your CSS is correct but your implementation is incorrect. – sam May 30 '19 at 09:55
1

take the footer div outside of app div. then it will work. – sam May 30 '19 at 09:55
app div is like application wrapper and changing that will change a lot. Can't even take things out of that. Any other way?, thanks for the suggestions though – Aniruddh Agarwal May 30 '19 at 10:05
add static height to your app. or use javascript code to get the height and assign it to the app div – sam May 30 '19 at 10:38
Thanks, everyone for the response I took the footer out of the App container and then assigned it a static height. – Aniruddh Agarwal May 30 '19 at 17:56

Align the footer at the bottom with variable content height

0 Answers0