JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<div id="container">
    <div id="header">HEARDER</div>
    <div id="content">
        <div id="section1" class="section">SECTION ONE</div>
        <div id="section2" class="section">SECTION TWO</div>
    </div>
    <div id="footer">FOOTER</div>
</div>

CSS

*
{
    margin: 0;
    padding: 0;
}
#container
{
	width: 500px;
}
#header
{
	border: 1px solid black;
	background-color: #aa0000;	
}
#content
{
	position: relative;
	border: 1px solid black;
	background-color: #ff0000;
    padding: 10px 0;
}
#footer
{
	border: 1px solid black;
	background: #dd0000;	
}

.section
{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #EEEEEE;
}
#section1
{
    top: 10px;
    left: 10px;
}

#section2
{
    top: 150px;
    left: 150px;	
}

JavaScript

var Height = 0;
    $(".section", "#content").each(function () {
        var curHeight = $(this).outerHeight(true) + $(this).position().top;
        Height = curHeight > Height ? curHeight : Height;
    });
    $("#content").css('height', Height + 'px');