The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS iFrame and footer conflict

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #247184

    Without any CSS:
    On the iFrame the responsive iFrame looks great on devices because the footer sits below the content.

    On desktop if you input a city and click Search the height of the frame is a fixed height and the properties look funny because of the iFrame HTML

    <iframe src="" width="100%" height="495" frameborder="0" allowtransparency="true">

    With CSS and no height or width on the iFrame:
    On desktop, the properties aren’t confined to a height on desktop. On mobile though, the footer is intrusive on the content.

    Also, there’s a double scroll bar.

    I know iFrames are not cooperative but there’s go t to be a better recipe to do the best I can.

    This is the CSS I tried.

    .hs {
        height: 100vh;
        width: 100%;
        position: relative;
    .hs iframe {
        min-width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;

    Without knowing the exact remaining height outside the iframe, one will have to estimate. Or use JS. On desktop this looks about right:

    .hs {
      height: calc(100vh - 255px);

    A bit too small on mobile though so adding a media query to change the amount of pixels subtracted at some breaking point might be a good idea.


    I tried your style and no difference. If you input a city and click Search you’ll see the second scroll bar and the footer does not know the height of the iFrame.


    It was meant as an adaptation to the style you had tried already. Although I think the only other essential rule there is .hs iframe {height: 100%}.

    Is what I’m guessing… it would be more convenient to show demos of what you’ve actually altered.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.