Css 可完全消失的可变边距/填充/间隔？

我正在寻找可变边距/间隔符/填充

如果可能，显然是一个干净的CSS解决方案

简言之：

今天，我们有许多不同分辨率的设备。比如说，我们的设计师为一款高度至少为900像素的设备设计了一个网页。上边距为150像素，下边距为100像素。 现在猜猜当有人带着700像素高的屏幕时会发生什么。一个滚动条出现了，但实际上，我们可以让上下边距消失一点，对吗？因为它们有250个像素的高度，我们可以去掉120个像素的上边缘（剩下30个）和80个像素的下边缘（剩下20个）。因此，保持良好的边距比，并保持页面全屏显示

CSS中是否有我忽略的东西

HTML

---

你不使用CSS媒体查询有什么原因吗？@ChrisSpittles哦，我当然在使用媒体查询。但我用它来做最重要的决定。介于两者之间的所有东西都应该有点适合自己。例如，通过解决此问题，并提供实际最小高度，可以在一个系统中解决所有设备的所有问题go@ChrisSpittles更清楚地说：用例是设计者想要提供全屏背景图像。把所有东西都放在全屏幕上。您可以从一个全屏切换到下一个全屏。这应该遵循这条规则，只有当全屏没有足够的高度来容纳它所包含的内容时才会中断。flex可以作为提示吗？您应该以vh单位设置边距（例如，900px屏幕上的100px变为11.1vh，在700px屏幕上会缩小到80px）。

  <div class="container2">x
  <div class="container">
  <div class="d1"> Make top and bottom margin be variable </div>
  <div class="d2"> but top margin 1.5 as big as bottom margin </div><div class="d2"> . </div>
  <table>
    <tr>
      <td>Variable means: make sure 
      </td>
      <td>That if there is not enough space (decrease html and body size)
      </td>
      <td>That the margins can disappear entirely (does not need to be margin, but a spacer right)
      </td>
    </tr>
  </table>
    <div class="d3">x </div>

</div>


</div>

   /*silly attempt:*/
.container{
  xpadding-top: 1.5%;
  xpadding-bottom: 1%;
}
/*silly attempt end*/

.container{
  height: 200px;
  background-color: gray;
}

.container2{
  height: 300px;
  background-color: lightyellow;
}

.d1{
    margin-top: 150px;
  background-color: lightblue;
  padding-bottom: 50px;
}

.d2{
  display: inline-block;
  background-color: lightgreen;
  padding-bottom: 200px;
}

table tr td{
  background-color: beige;
}

.d3{
  background-color: brown;
  height: 40px;
  margin-bottom: 100px;
}

* {
  overflow: auto;
}