Untitled

/* HTML */
<body>
    <div class="container">
        <header class="main-header">
            header
        </header>

        <aside class="contacts hide-for-mobile">
            contacts
        </aside>

        <div class="chat">
            chat
        </div>

        <aside class="features hide-for-tablet hide-for-mobile">
            features
        </aside>
    </div>
</body>

/* CSS */
/* WHOLE PAGE */
html, body {
    height: 100%;
  }
body {
    font: 15px Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    background-color: #f4f4f4;
}
* {
    box-sizing: border-box;
}
.container {
    height: 100%;
    border: 2px solid green;
}
.contacts, .chat, .features {
    height: calc(100% - 75px);
    float: left;
    border: 2px solid green;
    border-bottom: none;
    border-left: none;
}
/* HEADER   */
header {
    height: 75px;
}
.main-header {
    width: 100%;
}
/* CONTACTS */
.contacts {
    width: 25%;
}
/* CHAT     */
.chat {
    width: 50%;
}
/* FEATURES */
.features {
    width: 25%;
    border-right: none;
}
/* MEDIA QUERIES */
@media only screen and (max-width: 600px) {
    .chat {
        width: 100%;
    }
    .hide-for-mobile {
        display: none;
    }
}
@media only screen and (max-width: 992px) {
    .contacts {
        width: 33%;
    }
    .chat {
        width: 77%;
    }
    .hide-for-mobile {
        display: none;
    }
    .hide-for-tablet {
        display: none;
    }
}