JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div id="header">Header</div>

<div id="content" class="container">

    <div class="row row-centered">

        <div class="col-md-12">
        
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue convallis sem ac convallis. Suspendisse fermentum eget arcu a consectetur. Integer rhoncus non tellus ac bibendum. Vivamus quis gravida lectus. Phasellus sodales luctus lectus ac tincidunt. Curabitur a tortor in sem maximus venenatis. Phasellus eget mauris congue, mattis turpis eget, dapibus sapien. Vestibulum porttitor eleifend purus nec placerat. Aenean vulputate magna id enim tempor, eu semper sapien pulvinar.
</p>
<p>
Nunc molestie massa arcu, gravida rutrum diam dictum sit amet. Fusce vel gravida purus, ac finibus nunc. Aenean est purus, condimentum ornare enim et, auctor feugiat diam. Vestibulum hendrerit mauris et lectus luctus pellentesque in ac justo. Fusce porta lobortis felis faucibus rutrum. Aliquam dictum sem eget turpis consectetur, id congue ipsum varius. Curabitur sit amet faucibus lectus. Duis venenatis mi vitae feugiat gravida. Integer massa nibh, scelerisque eu mollis a, porta ut sapien. Quisque nec eleifend tellus. Proin ut congue massa. Nam posuere urna placerat tristique semper.
</p>
<p>
Aliquam sed molestie ante. Morbi bibendum ex id eros tempus, et iaculis dolor elementum. Curabitur scelerisque cursus odio eget efficitur. Vivamus nulla nunc, interdum quis mi a, aliquet interdum lacus. Nulla non molestie dolor, vitae vulputate urna. Nulla ut lacus augue. Duis vestibulum vehicula rhoncus. Integer quis suscipit lectus.
</p>
<p>
Sed eleifend elit sit amet est ullamcorper eleifend. Fusce sed libero justo. Maecenas vitae purus elementum, vestibulum nulla vitae, luctus elit....

CSS

html, body {
    display:flex;
    flex-direction:column;
    height: 100%;
}

body {
    background-color: yellow;
    color: #FFF;
    margin:  0 20px;
}

body > * {
    flex-shrink: 0;
}

div { position: relative; }
    
#header, #footer {
    margin-left: -21px;
    margin-right: -21px;
    z-index: 0;
}

#content, #footer {
    margin-top: -100px;
}

#header {
    background-color: #F00;
    height: 200px;
}

#content {
    background-color: #000;
    z-index: 1;
}

#footer {
    background-color: #00F;
    height: 400px;
}