CSS block 布局全屏

Question

想做一个大致像这样的屏幕布局:

整个浏览器窗口应该填充仅有的两个“已知”高度元素，即顶部、左侧和底部、左侧的白色 block (对于两个标签，因此已知将与字体相关)。其他所有内容都应随浏览器窗口缩放，即左侧栏宽 15%，右侧栏宽 85%，等等。

作为一名 C++ 开发人员，我的直觉是处理 Javascript 中的事件和针对 DOM 的代码，但我觉得这对于 CSS 来说相对微不足道。

谁能帮帮我？

Answer 1

我试图快速重现:

* {
  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>