JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/cowboy/jquery-throttle-debounce/raw/v1.1/jquery.ba-throttle-debounce.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<div class="screen">
    <div class="header">
        Title
    </div>
    <div class="content">
        <div class="wrap">
            Centered Content
        </div>
    </div>
    <div class="buttons">
        <span class="btn btn-large">Cancel</span>
        <span class="btn btn-primary btn-large">Done</span>
    </div>
</div>

CSS

.screen {
    padding:50px 20px 0;
    font-size:1em;
    line-height: 1.4;
}

.header {
    position:fixed;
    top:0px;
    left:0;
    width:100%;
    line-height:38px;
    font-size:1.3em;
    color:#fff;
    background: #999;
    border-bottom:2px #333 solid;
    text-align: center;
}

.btn {
    display:block;
    margin:5px 0;
}

.content {
    display: -moz-box;
    display: -webkit-box;
    display: -ms-box;
    display: box;
    
    -webkit-box-align: center;
	-moz-box-align: center;
	box-align: center;

	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;    
}
.buttons {
    padding-bottom:5px;
}
.content > .wrap {
    background:#efefef;
    width:100%;
}

JavaScript

$(function() {
    
    var screen = $('.screen'),
        content = $('.content'),
        contentWrap = $('.wrap:first', content);
    
    $(window).on('resize', $.throttle(250, function() {
        var contentHeight = content.innerHeight(),
            contentRealHeight = contentWrap.innerHeight(),
            screenHeight = screen.innerHeight() - contentHeight + contentRealHeight,
            viewportHeight = $(window).height();
        
        if (viewportHeight > screenHeight) {
            contentHeight = contentRealHeight + (viewportHeight - screenHeight);
            content.css('height', contentHeight + 'px');
        }
    })).trigger('resize');
    
});