Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS/iframe 100% height issue.

    I'm trying to include an iframe in my html/css, but running into a problem with the height.

    The containing div (#mlsContent) is not stretching vertically even though the css has the height set to 100%. It also doesn't seem to recognize a min-height, but functions properly to a defined pixel value.
    I thought that the problem might be from float collapsing, but even when i include a div at the end with clear:both; it doesn't expand the containing div to fill the height of the iframe.

    Is this an issue specific to the iframe, or do i just not understand css layout fully?

    kevin-funk.com/wcb/mlssearch.html

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Height:100% only works of an element if It's parent element's height defined.

    cross-browser min-height code is given below:
    Code:
    .classname {
    min-height:400px;
    height:400px;
    height:auto !important;
    }

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I included that CSS code to the iframe's parent element, but the iframe is still not expanding to the height of the div.

    kevin-funk.com/wcb/mlssearch.html

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    whats parent of iframe.. if its not HTML or BODY ... start from there... if height is not defined for any element in between....

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    gave that a try. put

    min-height:775px;
    height:775px;
    height:auto !important;

    on every parent element between html and the iframe... when i use firebug, i can see that the div has enough space to hold the contents of the iframe, but the iframe just doesn't stretch even though it has a window to work within.

  • #6
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it looks like the source of the iframe uses javascript to resize the window. do you think this could be the problem? would i have to use javascript to resize the iframe?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •