ショー要素はdiv要素

Question

に収まらない場合、私はその内容の一部を示す2つのdivを持っている「ビューは、すべて」ボタン：あなたは "を押すと

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

：https://jsfiddle.net/u1zmo2qn/2/

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

コンテンツをView-ALL "ボタンを押すと残りのコンテンツが表示されます。

問題は、コンテンツが（jsFiddleリンクで黄色のdivなど）のdiv内に収まる場合のdivは、「すべて表示」ボタンを必要としないかもしれないということです。

にはどうすればneccessarryy場合は、「表示すべて」ボタンのみが表示されていること、それを作るのでしょうか？

可能であれば私はそれ純粋なCSSをしたいと思いますが、JSは、世界の終わりではありません。

これは可能ですか？

divの内容は常に更新されます。可能であれば、divsの内容が変更されるたびに画面のサイズ変更イベントに対処する必要はなく、「SHOW_MORE」ボタンはneccessarry。

おかげで、何をしたい デビッド

Answer 1

は、あなたが持っているすべての制限を行うことは事実上不可能です。実際、Javascriptがなければ不可能です。一度コードを書くと、コンテンツが更新された後、更新機能を呼び出すべきか否かについて考える必要がないように、しかし、いくつかの創造性で、あなたはそれを作ることができます。

私はあなたがかなり便利やりたいあなたのフィドルを更新しました。 Fiddle here。このコードの最も重要な部分は、ブラウザーの幅と高さの変更によりコンテンツがオーバーフローした場合でも機能します。ターゲットブラウザでテストしてください。

私は好きなブラウザハックのうちの1つをhereに置いています。このコードは、コンテンツの高さの変化を検出します。コンテンツは、その親をオーバーフローした場合は、「すべて表示」ボタンが表示されます。私はタイルがクラスcontentとdivの中にあり、 "View All"ボタンがクラスviewallを持つようにhtmlを再構成しなければなりませんでした。