vrijdag 9 februari 2018

Toolbar to the left on equal level

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