有没有人有更好的方法来做到这一点？我只是学习如何玩CSS

个人而言,我会选择使用基于百分比的测量,这样你只需要更新width和height上.border本身.对于.border,我分别使用vw和vh单位为width和height,以便根据视口的大小调整表的大小.

请注意,您可能还希望使用类而不是ID,这样您就可以拥有多个表.我在我的示例中使用了类,并且还替换了名称以使位置标识符更加明显.

我还选择为元素#middle和#bottom元素创建一个容器,将它们视为一个单独的"列".通过这种方式,你可以使用float对齐#left,#middle_container并且#right列彼此相邻,而不必担心width的#bottom.

您可以通过添加margin: 0 auto来使整个事物居中.border,这是表示不应该有任何垂直边距的简写,并且应该自动计算水平边距(水平边缘使相关元素居中).

这可以在以下内容中看到:

.border {
  border: 2px solid black;
  width: 50vw;
  height: 100vh;
  padding: 1px;
  margin: 0 auto;
}

.top {
  background: red;
  width: 100%;
  height: 20%;
}

.left,
.middle_container,
.right {
  float: left;
}

.left {
  background: yellow;
  width: 20%;
  height: 80%;
}

.middle_container {
  width: 60%;
  height: 80%;
}

.middle {
  background: blue;
  height: 80%;
}

.bottom {
  background: green;
  height: 20%;
  bottom: 0;
}

.right {
  background: yellow;
  width: 20%;
  height: 80%;
}

  

    
Top
    
Left
    

      
Middle
      
Bottom
    
    
Right