CSS block layout full screen - css

Question

Could like to make a screen layout that's broadly like this:
The entire browser window should be filled with the only two elements of "known" height being the white blocks top, left and bottom, left (for two labels, hence known will be relative to a font). Everything else should scale with the browser window, i.e. the left bar being 15% wide, the right 85%, etc.
As a C++ developer my instinct here was to handle events in Javascript and code against the DOM but I've got a feeling this is relatively trivial with CSS.
Can anyone help me please?

Answer 1

I tried to reproduce quickly :
* {
box-sizing: border-box;
}
html,
body,
.wrapper {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.left,
.right {
float: left;
}
.left {
position: relative;
width: 15%;
height: 100%;
}
.left .label-top,
.left .label-bottom {
position: absolute;
width: 100%;
background-color: #fff;
}
.left .label-top {
top: 0;
left: 0;
}
.left .label-bottom {
bottom: 0;
left: 0;
}
.left .content,
.left .top,
.left .bottom {
border: 1px solid white;
}
.left .top,
.left .bottom {
height: 5%;
background-color: gray;
}
.left .content {
height: 30%;
background-color: #a09898;
}
.right {
width: 85%;
height: 100%;
background-color: gray;
}
.right::after {
content: '';
display: table;
clear: both;
}
<div class="wrapper">
<div class="left">
<div class="label-top">Label</div>
<div class="top"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="bottom"></div>
<div class="label-bottom">Label</div>
</div>
<div class="right"></div>
</div>

Answer 2

So, a little base that you can start to work on top of.
As fixed height, i used vh and it really depends in what browsers you want to support: vh support
Else you can use height: 100% of the parent or body.
.left-bar {
width: 15%;
background-color: red;
float: left;
height: 100vh;
border-right: 5px solid black;
}
.right-window {
width: 85%;
float: left;
height: 100vh;
background-color: pink;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="left-bar">
</div>
<div class="right-window">
</div>
I think this is what you want. Not sure though.
This achieves the full browser filling.
If you notice the width has calc() removing the 5px from the border, if you desire you can remove that and place only 15%.
I think you only wanted a base structure and this is a really simple one, and you gotta love my color picking skills.
Edit: Replaced calc() by adding box-sizing: border-box thanks to #Paulie_D comment.

Answer 3

For layouts, consider using positioning and display properties. There are many ways to create a dynamic structure, that ensures responsiveness.
For more detail, please see this question and answer for some 'general' rules you may consider when creating a website.
.left {
position: absolute;
lefT: 0;
top: 0;
height: 100%;
width: 15%;
background: lightgray;
}
.right {
position: absolute;
left: 15%;
top: 0;
height: 100%;
width: 85%;
background: dimgray;
}
.left .fixedBlock {
margin: 0;
padding: 0;
height: 50px;
background: blue;
}
.left .filledDiv {
height: calc(100% - 100px);
background: tomato;
}
.left .filledDiv .third {
height: 33.33%;
background: rgba(0, 0, 0, 0.2);
}
.left .filledDiv .third:nth-child(2) {
background: rgba(0, 0, 0, 0.4);
}
<div class="left">
<div class="fixedBlock">fixed height</div>
<div class="filledDiv">
<div class="third">dynamic height</div>
<div class="third">with children</div>
<div class="third">a third of its heigth</div>
</div>
<div class="fixedBlock">also fixed height</div>
</div>
<div class="right">right side - open me in full screen!</div>