Проблемы с высотой, центрированием и полями в CSS

Я пытаюсь создать страницу с 0 маркой сверху и снизу. Но по какой-то причине я не могу заставить все придерживаться верхней и нижней. Также есть проблема с height: хотя у меня height:100%; для всего, высота <div> превышает высоту окна. Кроме того, контент не центрируется на экране, когда размер экрана увеличивается (например, если он больше 1366 * 768).

Страница имеет три столбца с float:left; , завернутый в <div>. У меня есть в основном такой html код:

<div id="wrapper">
    <div class="col" id="col1"></div>
    <div class="col" id="col2"></div>
    <div class="col" id="col3"></div>
</div>

У меня есть CSS, который их модифицирует:

body, html {
    background-color: darkgray;
    margin: 0;
    height: 100%;
    width: 100%;
}


#wrapper {
    width: 80%;
    height: 100%;
    margin-top: 0;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 0;
    padding: 10px;
    background-color: #666;
    color: white;
    min-width: 722px;
    max-width: 1119px;
    font-family: 'Roboto Condensed', sans-serif;
    box-shadow: 0px 0px 25px black;
}


.col {
    /*background-color: red;*/
    height: 100%;
    float:left;
    margin-top: 0;
    margin-right: 0.6667%;
    margin-left: 0.6667%;
}

#col1 {
    width: 24%;
}

#col2 {
    width: 48%;
    box-shadow: 0px 0px 5px black;
}

#col3 {
    width: 24%;
}

Вы можете увидеть страницу здесь в этом jsfiddle.

Я хочу, чтобы <h1> (более темная серая область) придерживался вершины, а также другой <div> который является столбцами. Я также хочу, чтобы высота была размером экрана, если не щелкнуть второй заголовок, и в этом случае я хочу увеличить высоты div, чтобы расширить темную серое пространство до нижней части последней строки текста. Я также хочу сосредоточить все это, что не может центрировать, когда размер экрана увеличивается.