Footer is not sticking to the bottom of the page while contain an iFrame

Question

Only for a single page (given the demo link) my footer is not sticking to the bottom.

Because I have used an iframe and its not flushing the footer to the bottom.

test link : http://wiencoghanaa-001-site1.smarterasp.net/weather

My CSS code

.footer {
 bottom: 0;
 height: 210px;
 position: absolute;
 width: 100%;
}

possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Daniel Cheung, Aug 30 '15 at 10:28

score 0 · Accepted Answer · answered Aug 30 '15 at 19:57

You should try this CSS

#weatherDiv {
    margin-left: 100px;
    min-height: 100%;
   min-height: calc(100vh - 430px);
    background-color: yellow;
}

#weatheriframe {
    border: none;
    padding: 0;
    margin: 0;
    background-color: pink;
   min-height: calc(100vh - 430px);
}

.autoheightWeather {
     min-height: calc(100vh - 430px);
     background: #000;
}

Put a class to here

<div class="container autoheightWeather">

and the CSS remove the BG colors.

Footer is not sticking to the bottom of the page while contain an iFrame

1 Answers1