Forums

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

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #196922
    Mave
    Participant

    Hi, I’m creating a website for a friend and I’m having a bit of trouble with IE.

    First let me explain my situation:

    I have two divs next to eachother. (both 50% width)
    – One is an image that scales when the browser window gets resized.
    – The other one is a div that also proportionally scales, just like the image. Inside this div there are comments and a ‘post your comment’ field. The comments need to be 100% (then overflow-auto for a scrollbar) MINUS the height of the ‘post your comment’.
    So logically I created this:

    .activityCommentListComponent{
    overflow:auto;
    max-height: calc(100% – 60px);
    }

    However IE is doing this sometimes, not always, to my annoyance.
    If I refresh the page, half of the posts will have the scrollbar and desired height, the other half won’t.

    Any ideas/suggestions?

    #196924
    Beverleyh
    Participant

    Any particular version of IE acting up or is it all of them?

    How about a reduced case example? That might help you see if other CSS in your page is creating the problem or if it specifically is calc. If you do that in CodePen and post it here, it would be really helpful for us to help you troubleshoot, otherwise we’re just guessing.

    If your tests indicate that other CSS is impacting on calc, a link to your actual page would be great too.

    #196925
    Paulie_D
    Moderator

    You can see the support for calc here CanIUse – Calc

    It’s worth checking out the ‘Known Issues’ and making sure that the spacing inside the ‘equation’ is correct.

    #197070
    Mave
    Participant

    Here’s my Codepen: http://codepen.io/anon/pen/myKZJE?editors=110

    EDIT: I can’t seem to re-produce the IE bug…
    Maybe anyone knows a solution for me to not use calc() here?
    I’m sure the IE bug will also disappear then.

    I tried using box sizing border box as an alternative, but I can’t make it work.. : http://codepen.io/anon/pen/XJYLRw

    #197077
    Paulie_D
    Moderator

    I’m guessing (although you say this is a ‘sometimes’ problem) that IE is having trouble with calc of 100% when it may not know what 100% means.

    Usually, the 100% will refer back to a specific value…all the way up the DOM and if that’s not 100% on the html & body elements it’ll break.

    #197088
    Mave
    Participant

    Thanks for your answer.
    Is there something else I could use instead of calc() with the same result? (responsive div next to responsive image)

    #197100
    Shikkediel
    Participant

    I noticed similar behaviour in IE where it would only respond to a line-height set in vh after a page reload. I think in this case JavaScript’s the only option left to solve it?

    #197103
    Mave
    Participant

    I fixed it!
    Changing

    max-height: calc(100% – 60px);

    to

    height: calc(100% – 60px);

    was all it took…
    At least it’s solved now.
    Thanks to everyone who replied.

    #197105
    Shikkediel
    Participant

    Interesting – and a bit odd, thanks for the update. No JS needed then.

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