Делаю вот так
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#main {
position: relative;
height: 100%;
border: solid 1px blue;
min-height: 100%;
}
#sidebar {
position: absolute;
top: 50px;
left: 0px;
width: 30%;
height: 100%;
border: solid 1px red;
}
#content {
position: absolute;
top: 50px;
right: 0px;
width: 70%;
height: 100%;
border: solid 1px green;
}
#message {
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
height: 10%;
border: solid 1px black;
}
#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
border: solid 1px yellow;
height: 50px;
}
</style>
</head>
<body>
<div id="main">
<div id="header"></div>
<div id="sidebar">сидебар</div>
<div id="content">
контент
<div id="message">мессаге</div>
</div>
</div>
</body>
</html>
но div-sidebar, div-content, div id-message выходят за границы div-main. Если убрать у div-sidebar, div-content top: 50px, то они накладываются на div-header. Как вариант уменьшить у этих div'ов height, но хотелось, чтобы заполняли всю область, чтобы у других пользователей нормально отображалось.