Forums

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
    Posts
  • #247184
    jknetdesign
    Participant

    http://homecarmel.com/

    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="http://search.idxre.com/homesearch/96655" 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;
    }
    
    #247192
    Shikkediel
    Participant

    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.

    #247202
    jknetdesign
    Participant

    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.

    #247206
    Shikkediel
    Participant

    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.