Centre div unknown height

HTML

<div id="main">
    <div id="box">
        
        <div id="content">
            <h1 id="heading">HEADING</h1>
         
                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget diam in mi facilisis condimentum. Nullam at arcu erat. Nullam elit libero, sodales sit amet pellentesque et.</p>
<div id="button"></div>
        </div>

    </div>
</div>

CSS

*{
    padding:0;
    margin:0;
}
#main {
    position:absolute;
    top:0; left:0; right:0; bottom:0; background:lightbl
    
    font-family:arial;
}
#box{
    position:absolute;
    top:15%; bottom:15%;
    background:white;
    left:50%;
}
#content{
    position:absolute;
    width:100%;
    top:50%;
    background:lightgrey;
}
#left{
    float:left;
    width:50%;
    overflow:auto;
    background:lightyellow;
    margin-bottom:30px;
}
#wrap{
    clear:left;
}
#button{
    height:30px;
    background:red;
    position:absolute;
    bottom:0;
    left:25%; right:25%;
}

JavaScript

function alignContent(){
    // Position containing box
    $box = $('#box');
    $box.css({
        'width' : $box.height() + 'px',
        'margin-left' : '-' + $box.height()/2 + 'px'
    });
    // Size & position content area
    $content = $('#content');
    $content.css({
        'max-height' : $box.height()-72 + 'px',
        'margin-top' : '-' + ($content.outerHeight()/2) + 'px'
    });
    // Left panel sizing
    $left = $('#left');
    $max = ( $box.height() - 72 - 30 - $('#heading').outerHeight() );
    $left.css({
        'max-height': $max
    });
}
alignContent();

// Update when resized
$(window).resize(function(){
    alignContent();
});

$(window).load(function(){
    alignContent();    
});