JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="content">
        <h1>Заголовок</h1>
        <p>Какой-то текст</p>
        <p>Еще какой-то текст</p>
    </div>
    <div class="push"><!-- если забить на IE7, что давно пора, лучше заменить это псевдоэл-том --></div>
</div>
<div class="footer">
    <address>Какая-то контактная информация и т.п.</address>
</div>

CSS

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}

.wrapper {
    margin: 0 auto -4em;
    width: 780px;
    min-height: 100%;
    position: relative;
}


.wrapper:before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    border: 1px solid #888;
    outline: 1px solid #000;
    background: #eee;
}

.wrapper:after {
    content: '';
    position: absolute;
    right: 11px;
    bottom: 11px;
    left: 11px;
    border-top: 2px solid #000;
}

.content {
    padding: 20px;
    position: relative;
}

.push, .footer {
    height: 4em;   
}

.footer {
    width: 780px;
    margin: 0 auto;
    padding: 10px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

.footer:before {
    content: '';
    display: block;
    border-top: 1px solid #888;
}