- This topic is empty.
-
AuthorPosts
-
February 27, 2015 at 1:28 am #196922
Mave
ParticipantHi, 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?
February 27, 2015 at 2:26 am #196924Beverleyh
ParticipantAny 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.
February 27, 2015 at 5:44 am #196925Paulie_D
MemberYou can see the support for
calc
here CanIUse – CalcIt’s worth checking out the ‘Known Issues’ and making sure that the spacing inside the ‘equation’ is correct.
March 2, 2015 at 3:49 am #197070Mave
ParticipantHere’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
March 2, 2015 at 5:31 am #197077Paulie_D
MemberI’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.March 2, 2015 at 5:35 am #197088Mave
ParticipantThanks for your answer.
Is there something else I could use instead of calc() with the same result? (responsive div next to responsive image)March 2, 2015 at 9:44 am #197100Shikkediel
ParticipantI 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?
March 2, 2015 at 9:58 am #197103Mave
ParticipantI fixed it!
Changingmax-height: calc(100% – 60px);
to
height: calc(100% – 60px);
was all it took…
At least it’s solved now.
Thanks to everyone who replied.March 2, 2015 at 10:03 am #197105Shikkediel
ParticipantInteresting – and a bit odd, thanks for the update. No JS needed then.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.