Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Try this jQuery solution, based on your first <a href="http://jsfiddle.net/3pqFE/5/" rel="nofollow">jsfiddle</a>:</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div id="container"&gt; &lt;div class="test"&gt;&lt;/div&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam magni nesciunt sit consectetur dolore quos veritatis aliquam modi consequuntur quibusdam ratione molestias earum optio asperiores nemo quam dignissimos iure recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam magni nesciunt sit consectetur dolore quos veritatis aliquam modi consequuntur quibusdam ratione molestias earum optio asperiores nemo quam dignissimos iure recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam magni nesciunt sit consectetur dolore quos veritatis aliquam modi consequuntur quibusdam ratione molestias earum optio asperiores nemo quam dignissimos iure recusandae? &lt;/div&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>#container{ width:50%; margin:0 auto; position:relative; padding: 5px; } .test{ height:100%; width:auto; position:absolute; border-top: 300px solid #05ed08; border-left: 45px solid transparent; border-right: 45px solid transparent; right:-45px; left:-45px; z-index:-1; top:0; bottom:0; } </code></pre> <p><strong>jQuery:</strong></p> <pre><code>var divHeight = $('div#container').height() + 10; $('#container').css('height', divHeight+'px'); $('.test').css('border-top', divHeight+'px solid #05ed08'); </code></pre> <p>Demo: <a href="http://jsfiddle.net/UrTLU/3/" rel="nofollow">http://jsfiddle.net/UrTLU/3/</a></p> <p><strong>Note</strong>: Try adding content for seeing increasing of height.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload