您可以使用flex property修改代码以实现所需的输出。

另外，我增加了flex-shrink: 0;，防止在缩小viewport宽度时，页眉和页脚会缩小。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: skyblue;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: black;
  color: rgb(225, 150, 0);
  font-weight: bold;
  font-style: italic;
  padding: 5px 10px;
  border: 1px solid blue;
  flex: 0 0 10%;
  flex-shrink: 0;
}

.container {
  border: 1px solid red;
  flex: 1 0 70%;
}

.footer {
  border: 1px solid green;
  flex: 0 0 20%;
  flex-shrink: 0;
}

<div class="header">
  <p>HEADER</p>
</div>
<div class="container">
  <p>CONTAINER</p>
</div>
<div class="footer">
  <p>FOOTER</p>
</div>

有两种方法可以实现这一点，分别是Grid和Flex;首先，使用网格：

/* a simple reset, to remove default margin and padding, and using
   box-sizing to have all browsers use the same sizing algorithm,
   in order to have padding and border widths included within the
   declared sizing: */
*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  /* taking 100 units of viewport-height on the block axis (the
     axis on which block elements are placed): */
  block-size: 100vh;
  /* using grid layout: */
  display: grid;
  /* setting a 0.5rem gap between adjacent grid-items: */
  gap: 0.5rem;
  /* defining the three rows: the first 10%, the third 20% and
     the second taking 1 fraction of all the remaining space: */
  grid-template-rows: 10% 1fr 20%;
}

section > * {
  /* irrelevant to demo, but is just to center the content of
     the grid-items: */
  display: grid;
  place-content: center;
}

/* irrelevant to the demo, just to colour the various elements: */
header {
  background-color: hsl(50deg 90% 70%);
}

main {
  background-color: hsl(100deg 90% 70%);
}

footer {
  background-color: hsl(150deg 90% 70%);
}

<section>
  <header>
    <p>Heading</p>
  </header>
  <main>
    <p>Main content</p>
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</section>

JS Fiddle demo。
其次，使用flex：

/* simple reset - as above - to remove default margins and
   padding, and to have box-sizing include the padding and
   borders in the declared sizes: */
*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  /* sizing the <section> to take 100 viewport-height units: */
  block-size: 100vh;
  /* using flex layout: */
  display: flex;
  /* setting the main axis of the flex layout to columnnar: */
  flex-direction: column;
  /* setting a 0.5rem gap between adjacent flex-items: */
  gap: 0.5rem;
}

/* irrelevant to the demo, just centering the content of the
   flex-items: */
section > * {
  display: grid;
  place-content: center;
}

header {
  background-color: hsl(50deg 90% 70%);
  /* setting the flex-basis - that defines the base-size
     of the element - to 10% of its parent's size: */
  flex-basis: 10%;
}

main {
  background-color: hsl(100deg 90% 70%);
  /* specifying that the element should grow to take
     available space: */
  flex-grow: 1;
}

footer {
  background-color: hsl(150deg 90% 70%);
  /* setting the flex-basis to 20% of the parent's size: */
  flex-basis: 20%;
}

<section>
  <header>
    <p>Heading</p>
  </header>
  <main>
    <p>Main content</p>
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</section>

JS Fiddle demo。
我觉得有必要指出的是，尽管你提出了要求，但你并不真的想使用这些尺寸。根据百分比调整元素大小的布局可能很好，但它也暴露了内容显示在极端的可能性，从可笑的小（手机，手表）到可笑的大（大屏幕显示器）。
说到这里，我想利用clamp()函数对上面的代码做一个小小的修改;这允许我们设置“首选”大小，但具有指定的最小值和最大值：

/* a simple reset, to remove default margin and padding, and using
   box-sizing to have all browsers use the same sizing algorithm,
   in order to have padding and border widths included within the
   declared sizing: */
*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  /* taking 100 units of viewport-height on the block axis (the
     axis on which block elements are placed): */
  block-size: 100vh;
  /* using grid layout: */
  display: grid;
  /* setting a 0.5rem gap between adjacent grid-items: */
  gap: 0.5rem;
  /* defining the three rows,
       row 1: a minimum size of 4rem, a maximum size of 150px, with a
       preferred size of 10% (as specified in the question):,
       row 2: as before, set to take all available space once the
       elements with a specific defined size have been laid out,
       row 3: a mimum size of 8rem, a maximum of 250px, and a preferred
       size of 20%: */
  grid-template-rows: clamp(4rem, 10%, 150px) 1fr clamp(8rem, 20%, 250px);
}

section > * {
  /* irrelevant to demo, but is just to center the content of
     the grid-items: */
  display: grid;
  place-content: center;
}

/* irrelevant to the demo, just to colour the various elements: */
header {
  background-color: hsl(50deg 90% 70%);
}

main {
  background-color: hsl(100deg 90% 70%);
}

footer {
  background-color: hsl(150deg 90% 70%);
}

<section>
  <header>
    <p>Heading</p>
  </header>
  <main>
    <p>Main content</p>
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</section>

JS Fiddle demo。
其次，使用flex：

/* simple reset - as above - to remove default margins and
   padding, and to have box-sizing include the padding and
   borders in the declared sizes: */
*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  /* sizing the <section> to take 100 viewport-height units: */
  block-size: 100vh;
  /* using flex layout: */
  display: flex;
  /* setting the main axis of the flex layout to columnnar: */
  flex-direction: column;
  /* setting a 0.5rem gap between adjacent flex-items: */
  gap: 0.5rem;
}

/* irrelevant to the demo, just centering the content of the
   flex-items: */
section > * {
  display: grid;
  place-content: center;
}

header {
  background-color: hsl(50deg 90% 70%);
  /* setting the flex-basis to a minimum of 4rem, a maximum of
     150px, with a preferred size of 10% within those constraints: */
  flex-basis: clamp(4rem, 10%, 150px);
}

main {
  background-color: hsl(100deg 90% 70%);
  /* specifying that the element should grow to take
     available space: */
  flex-grow: 1;
}

footer {
  background-color: hsl(150deg 90% 70%);
  /* setting the flex-basis to a minimum of 8rem, a maximum of
     250px, with a preferred size of 20% within those constraints: */
  flex-basis: clamp(8rem, 20%, 250px);
}

<section>
  <header>
    <p>Heading</p>
  </header>
  <main>
    <p>Main content</p>
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</section>

JS Fiddle demo。
参考文献：

• clamp()。
• display。
• flex-basis。
• flex-grow。
• gap。
• grid-template-rows。

要实现这一点，请使用CSS flex属性，值为flex-base和flex-growth。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: skyblue;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: black;
  color: rgb(225, 150, 0);
  font-weight: bold;
  font-style: italic;
  padding: 5px 10px;
  border: 1px solid blue;
  flex: 0 0 10%;
}

.container {
  border: 1px solid red;
  flex: 1 0 70%;
}

.footer {
  border: 1px solid green;
  flex: 0 0 20%;
}

<div class="header">
  <p>HEADER</p>
</div>
<div class="container">
  <p>CONTAINER</p>
</div>
<div class="footer">
  <p>FOOTER</p>
</div>