How to fit three divs into window's height? - html

Question

I'm currently working on a chat project with Bootstrap and I have issues positioning my divs. Here's my pattern:
<div class="container">
<div class="row"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div class="row"> <!-- #main -->
<div class="col-sm-9">
<ul>Chat messages</ul> <!-- #chatbox -->
</div>
<div class="col-sm-3">
<ul>Users list</ul> <!-- #users -->
</div>
</div>
<div class="row"> <!-- #input -->
<form>Input zone</form>
</div>
</div>
Basically what I want is to fit these 3 row sections into the browser's height, so that the input zone is always at the bottom of the screen and the page is not scrollable, but I want both the #chatbox and the #users to be scrollable so that they fit in the #main.
Here is what I've done so far:
html, body {
height: 100%;
margin: 0;
}
body > .container {
height: 100%; /* Fit the container into the window */
}
.row#main > div {
max-height: 100%; /* This doesn't */
overflow: auto; /* work :( */
}
.row#input { /* Stick the input zone at the bottom */
position: absolute;
bottom: 0px;
width: 100%;
margin-bottom: 0px;
}
But when I extend the #chatbox or the #users, I don't get a good result :(
Anyone's got an idea? I'd like a full-CSS solution if possible :3
Thanks ^^

Answer 1

I've made a little demo for you to resolve this issue. Its pure CSS and suitable for any responsive layout.
You need to use the absolute position cleverly.
demo http://jsfiddle.net/h87p14tx/2/
HTML
<div class="row header"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div class="row main"> <!-- #main -->
<div class="col-sm-9 chatbox"> <!-- #chatbox -->
<ul>Chat messages</ul>
</div>
<div class="col-sm-3 users"> <!-- #users -->
<ul>Users list</ul>
</div>
</div>
<div class="row input"> <!-- #input -->
<form>Input zone</form>
</div>
CSS
.header, .input {
width: 100%; position: absolute;
background: red;
}
.header {
top: 0;
height: 70px;
}
.input {
bottom: 0;
height: 50px;
}
.main {
width: 100%; position: absolute; top: 70px; bottom: 50px;
background: green;
overflow: auto;
}
.chatbox, .users{
height: 100%;
}
.main .chatbox{
width: 70%;
float: left;
background: blue;
}
.main .users{
width: 30%;
float: right;
background: yellow;
}

Answer 2

Assuming you are essentially creating a header/body/footer layout, this should do the job:
html,
body {
min-height: 100%;
padding:0;
margin:0;
}
#main {
position: absolute;
padding: 100px 0;
top:0;
bottom:0;
left:0;
right:0;
background-color: red;
}
#header {
margin-top:-100px;
height:100px;
background-color: blue;
}
#body {
min-height: 100%
}
#footer {
height: 100px;
margin-bottom: -100px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div id="main" class="container">
<div id="header" class="row"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div id="body" class="row"> <!-- #main -->
<div class="col-sm-9">
<ul>Chat messages</ul> <!-- #chatbox -->
</div>
<div class="col-sm-3">
<ul>Users list</ul> <!-- #users -->
</div>
</div>
<div id="footer" class="row"> <!-- #input -->
<form>Input zone</form>
</div>
</div>