SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    Lancaster,UK
    Posts
    31
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    DIV and image inside should take up only available height

    Hi guys,

    It would probably be the easiest if you looked at the demo first : http://zerobrainwash.com/sandbox/responsiveImage/ .
    I have been playing with this the whole day. The banner is fixed and the bottom part with image is responsive. I got in working on Chrome so that the main image takes up only available height and then width is chosen automatically.
    However, on Firefox and Internet Explorer the image expands to its full height rather than fit into available space. I can't figure out what is the problem. Maybe you are more clever than me and have an idea of what could be the problem?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Try adding this:

    Code:
    .landscapeOverviewHelper{display:table}
    IE8+ only

    Or try:

    Code:
    .landscapeOverviewHelper{float:left}
    BTW that image file size is about ten times too big. I would be looking at 150k maximum not 1500k!

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    Lancaster,UK
    Posts
    31
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Appreciate your help Paul!! I tried out both options, not working. Also, on Chrome { display: table } caused the image to disappear completely while on other browsers it had no effect. I have reduced image size, cheers.

    Is there anything else I could try out? I don't understand why Firefox and IE are not rendering it whilst Webkit browsers do just fine.

    On the same note, max-width: 100% works whilst max-height: 100% obviously does not. Strange that too such similar CSS rules don't behave the same.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Brownieable View Post
    Appreciate your help Paul!! I tried out both options, not working. Also, on Chrome { display: table } caused the image to disappear completely while on other browsers it had no effect. I have reduced image size, cheers.

    Is there anything else I could try out? I don't understand why Firefox and IE are not rendering it whilst Webkit browsers do just fine.
    Hi,

    Height or max-height will be zero if the immediate parent has no height defined or relies on content height. It doesn't work the same as width and I would think chrome is incorrect in this instance.

    If you want a 100% high container then you would need your banner at 25% height and main at 75% height but of course that means they cannot grow - which may be what you want. You would then need to add 100% height to the nested elements in order for the height to be effective. I would also assume that you would need to remove the width:auto from the image also unless you wanted that in percentages also.

    e.g.
    Code:
    html,body,#hotspots,#landscapeOverview  { height:100%;margin:0;padding:0 }
    #landscapeOverviewHelper{height:100%;float: none; }
    #landscapeOverview img {
      display: block;
      height: auto;
      max-height: 99%;
      margin: 0 auto;
    }
    #banner{height:25%}

    However, I'm not quite sure what your ultimate goal is here and the above may be wide of the mark. You can't use height if you want elements to grow taller than the initial height (unless you use display:table). If you are fixing the height to the viewport and no more then the code above should work.


Tags for this Thread

Bookmarks

Posting Permissions

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