javascript - 如果元素不适合 div，则显示 "view all"按钮

Question

我有两个 div 显示它的一些内容:https://jsfiddle.net/u1zmo2qn/2/

<div id="div1"> </div> <div id="div2"> </div>

内容:

<div class="el"> This is a square </div> ..

当您按下“查看所有”按钮时，它会显示其余内容。

问题是，如果内容适合 div(如 jsFiddle 链接中的黄色 div)，div 可能不需要“显示全部”按钮。

如何让“显示所有内容”按钮仅在必要时显示？

如果可能的话，我希望它是纯 CSS，但 JS 不会是世界末日。

这可能吗？

div 的内容将不断更新，如果可能的话，我宁愿不必处理屏幕调整大小事件或每次 div 内容发生变化时都做一些事情，只在必要时完成“SHOW_MORE”按钮.

谢谢， 大卫

Answer 1

你想要的几乎不可能用你所有的限制来做。事实上，没有 Javascript 是不可能的。不过，如果有一些创意，您可以做到代码一次编写，而不必考虑在内容更新后是否调用更新函数。

我已经更新了你的 fiddle ，可以很方便地做你想做的事。 Fiddle here .这段代码最好的部分是，即使在内容由于浏览器宽度和高度的变化而溢出的情况下，它也能正常工作。请务必在您的目标浏览器中对其进行测试。

我使用了我最喜欢的浏览器黑客之一，位于 here .该代码检测内容高度的变化。如果内容溢出其父级，则显示“查看全部”按钮。我不得不重组 html，以便图 block 位于类为 content 的 div 中，“查看全部”按钮有类 viewall。