I'm struggling with adjusting the height of a node-webkit app to fit the current window size. See below for an image depicting what I am aiming for.
Intended Goal :
HTML Markup :
<body>
<div class="header">
THIS IS A HEADER WITH LINKS AND THINGS
</div>
<div class="content">
<div class="sidebar">
SIDE BAR WITH MORE LINKS AND THINGS
</div>
<div class="mainarea">
<div class="chatbox">
SOME SORT OF BOX WITH THINGS IN
</div>
<form>
<input name="q" placeholder="type something here"/>
<input type="submit" value="Send"/>
</form>
</div>
</div>
</body>
CSS Styling :
body {
height: 100%;
}
.header {
height: 80px;
background-color: red;
}
.content {
width: 100%;
height: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
background-color: yellow;
}
.chatbox {
width: 100%;
border-style: solid;
border-width: 1px;
}
.mainarea {
float: right;
width: 80% !important;
background-color: green;
height: 100%;
}
Live Demo: