See: https://jsfiddle.net/kjtmq0us/3/
html
<div class="sideBarEqual">Side info!</div>
<div class="baseNode">
<div class="toolbar">Toolbar</div>
<div class="theContent">
very much content...
</div>
</div>
css
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: yellow;
overflow: hidden;
display: flex;
flex-direction: row;
}
.baseNode {
flex: 1 1 auto;
}
.toolbar {
background-color: red;
height: 40px;
}
.theContent {
background-color: blue;
height: calc(100vh - 40px);
overflow: auto;
}
.sideBarEqual {
flex: 0 0 120px;
background-color: purple;
color: yellow;
}
.sideBarOverlay {
position: fixed;
left: 0px;
top: 0px;
width: 120px;
height: 100vh;
background-color: purple;
opacity: 1.0;
color: yellow;
}
Geen opmerkingen:
Een reactie posten