Html容器设置

Question

我有以下容器设置

• 整个页面分为两半，左右分开
• 将左侧容器分成两个独立的容器，上部和下部容器

下层将会有动态内容，但我使用了spacer来保持布局，并在下层添加了一个内容容器。

问题在于，如果我将margin-top应用于下部容器内的内容容器，则边距将应用于下部间隔器，从而在上部和下部之间产生间隙。我无法绕过这个问题，当我在一个空白页面重建它时只需在容器中上下分割它就可以正常工作。

* {
  margin: 0px;
  padding: 0px;
}

#left {
  width: 50%;
  height: 100%;
  float: left;
  background-color: #333;
}

#upper-spacer {
  width: 100%;
  height: 20%;
  background-color: #f00;
}

#lower-spacer {
  width: 100%;
  height: 80%;
  background-color: #28a87a;
}

#lower-content {
  width: 90%;
  margin: auto;
  margin-top: 20px;
  height: 80%;
  background-color: #1d77c6;
}

#right {
  width: 50%;
  height: 100%;
  float: right;
  background-color: #3c3c3c;
}

<div>
  <div id="left">
    <div id="upper-spacer"></div>
    <div id="lower-spacer">
      <div id="lower-content"></div>
    </div>
  </div>
  <div id="right"></div>
</div>

我不只是寻找和轻松修复，而是更多的解释。