这使用了太多的空间header.我希望它最多占用尽可能多的空间,使其内容不会溢出.

我怎样才能做到这一点？

我对任何基于规格的解决方案感兴趣,但实际上我希望能够至少在Chrome(或Firefox)最新的稳定版本中使用它.

为标题行指定自动调整大小,并将1fr所有剩余空间分配给内容行.

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

body {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  width: 100vw;
}

header {
  border: 1px solid red;
}

.content {
  border: 1px solid blue;
}

  
IMG + Some header text



  Here will be dynamic content (a grid on its own).
  Should take all the remaining height.