code

 #ds-smilies-tooltip { max-width: 400px; min-width: 200px; width: -webkit-calc(100% - 130px);   /* WebKit 536.3 (Chrome 19) and above, experimental */ width:         calc(100% - 130px);   /* final CSS3 compliant implementation;  Firefox 16 and IE 9, and above */ }

It is OK to add this section to the original css

introduce

Quite simply, calc is the abbreviation of Calculate, so it calculates the value of the expression in parentheses through "+, -, *,/" operations, and takes the value as the final result.

But pay attention to the following points:

  1. When there is "+" and "-" in the expression, there must be spaces before and after it. For example, "widht: calc (12%+5em)", which is written without spaces, is wrong;
  2. It is better to add identifiers of different browsers to make them compatible

calc(100% - 130px); The width of the screen is - 130px. (The maximum is not more than 400px, and the minimum is not less than 200px.)

But because The width of a screen is fixed , so the cascading reply emoticon box will still exceed the boundary==I don't know how to deal with it?

I read the code hran Thank you!

Reference Documents

[[1] cal help document]（ https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc )

Last modification: March 23, 2019
© Allow specification reprint
Do you like my article?
Don't forget to praise or appreciate, let me know that you accompany me on the way of creation.