JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<div id="further_outer">
<div id="header"></div>
<div id="outer">
    <div id="sibling">
        <div>
            <div><p>other content is above elementId</p></div>
            <div id="elementId"></div>
        </div>
    </div>
</div>
<div id="footer"></div>
</div>
<div>
    <p>the html looks like this</p>
<pre>
&lt;div id=&quot;further_outer&quot; &gt;     //further_outer
&lt;div id=&quot;header&quot;&gt;&lt;/div&gt;     //header is purple
&lt;div id=&quot;outer&quot; &gt;     //outer has height set to created div
    &lt;div id=&quot;sibling&quot;&gt;
        &lt;div&gt;
            &lt;div id=&quot;elementId&quot;&gt;&lt;/div&gt;     //elementId is light grey
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&quot;secondElementId&quot; &gt;     //secondElementId is sibling, is yellow
        &lt;div&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;footer&quot;&gt;&lt;/div&gt;     //footer is blue
&lt;/div&gt;
</pre>
</div>

CSS

p {padding: 0px; margin: 0px;}
#header{height:50px; width:100%; background:#892055;}
#elementId {height:50px;width:50px;background:#eaeaea;margin:0px auto;}
#secondElementId {width:100%;background:#fad400;opacity:.5;}
/*since the intention is to use this to create a background div use z-index to set order*/
/*uncomment to set z-index*/
/*
#secondElementId {z-index:-1;}
*/
#outer{position:relative; background:#333; z-index:-2;}
#footer{position:relative; top:0px; height:50px; width:100%; background:#337788;}

JavaScript

// create sibling div
// set position relative to another div
// set height of div from another div
// subtract height of inner div from outer div
// subtract height of inner div from top position of footer

//----------------------------------------//
// create sibling div using $('.inner').after('<p>Test</p>');
// via - http://api.jquery.com/after/
//----------------------------------------//

$('#sibling').after("<div id='secondElementId'><div>");

//----------------------------------------//
// set position relative to another div
// via - http://stackoverflow.com/questions/4613261/get-and-set-position-with-jquery-offset
//----------------------------------------//

//Get
var p = $("#elementId");
var offset = p.offset();

//set - element rel to top of #elementId
$("#secondElementId").offset({ top: offset.top});
// to set to left position use
////$("#secondElementId").offset({ top: offset.top, left: offset.left});

//----------------------------------------//
// set height of div from another div - $(".sidebar").css({'height':($(".content").height()+'px')});
// via http://stackoverflow.com/questions/3275850/set-a-div-height-equal-with-of-another-div
//----------------------------------------//

// set height of div from another div
$("#secondElementId").css({'height':($("#elementId").height()+'px')});

//----------------------------------------//
// subtract height of inner div from outer div
//----------------------------------------//
var minusHeight = $('#elementId').height();
var startHeight = $('#further_outer').height();
$("#further_outer").css("height",startHeight - minusHeight);

//----------------------------------------//
// subtract height of inner div from top position of footer
//----------------------------------------//
$("#footer").css("top",-minusHeight);