根据子元素的纵横比调整网格列的大小

Question

我的问题类似于这一个：我试图在其父元素中包含一个aspect-ratio元素。但是，有一个不同之处，这个aspect-ratio元素有兄弟姐妹--一个页眉和一个页脚--所有这些漂亮的家庭都应该对齐中心，并共享一个共同的宽度。

图片值一千字：

​

​

GIF值一千张图片：

​

​

我已经接近那个结果了，但我还不太清楚：

​

body {
  height: 100%;
  margin: 0;
}

html {
  background-color: lightgrey;
  height: 100%;
}

#footer,
#header {
  background-color: blue;
  height: 50px;
}

#paper {
  aspect-ratio: 1;
  background-color: red;
  margin: auto;
  max-height: 100%;
  overflow: hidden;
  width: 100%;
}

#wrapper {
  align-content: center;
  display: grid;
  height: 100%;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

​

有CSS向导帮我吗？

Answer 1

不确定你是否能得到所有的要求，但这里是我能做的最好的(似乎只在铬上工作)

​

body {
  background-color: lightgrey;
  margin: 0;
}

#footer,
#header {
  background-color: blue;
  height: 50px;
}

#paper {
  aspect-ratio: 1;
  background-color: red;
  max-height: 100%;
  max-width: 100vw;
}

#wrapper {
  place-content: center;
  display: grid;
  height: 100vmin;
  margin-block: max(0px,50vh - 50vmin);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

​

如果50px是已知的，您可以这样做：

​

body {
  background-color: lightgrey;
  margin: 0;
  --h: 50px; /* the fixed height */
}

#footer,
#header {
  background-color: blue;
  height: var(--h);
}

#paper {
  aspect-ratio: 1;
  background-color: red;
  width: min(100vw,100vh - 2*var(--h));
}

#wrapper {
  place-content: center;
  display: grid;
  height: min(100vh, 100vw + 2*var(--h));
  margin-block: max(0px, (100vh - 100vw - 2*var(--h))/2);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

​

Answer 2

尝试这个解决方案，在grid-template-columns和grid-template-rows中所有的魔术都会发生。

​

html {
  background-color: lightgrey;
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

#wrapper {
  --footer-header-height: 50px;
  align-content: center;
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr minmax(auto, calc(100vh - var(--footer-header-height) * 2)) 1fr;
  grid-template-rows: auto minmax(auto, 100vw) auto;
}

#footer,
#header {
  grid-column: 2;
  background-color: blue;
  height: var(--footer-header-height);
}

#paper {
  grid-column: 2;
  aspect-ratio: 1 / 1;
  background-color: red;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

​

Answer 3

实际上，容器查询使我们能够很好地解决这类问题。

对这个特性的支持目前非常糟糕(请看这里)，但是它是互操作2022的一部分，所以我想到年底它看起来会有所不同。

我把这个作为答案，因为它可能会对未来的人有所帮助。

请注意，您目前需要打开Chrome上的标志才能测试它。

​

body {
  container-type: size;
  height: 100%;
  margin: 0;
}

html {
  background-color: lightgrey;
  height: 100%;
}

#footer,
#header {
  background-color: blue;
}

#paper {
  background-color: red;
}

#wrapper {
  align-content: center;
  display: grid;
  grid-template-columns: min(100cqi, (100cqb - 100px));
  grid-template-rows: 50px min(100cqb - 100px, 100cqi) 50px;
  justify-content: center;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

​

下面是相同的代码，但依赖于viewport单元(在所有浏览器中都可以工作)：

​

body {
  height: 100%;
  margin: 0;
}

html {
  background-color: lightgrey;
  height: 100%;
}

#footer,
#header {
  background-color: blue;
}

#paper {
  background-color: red;
}

#wrapper {
  align-content: center;
  display: grid;
  grid-template-columns: min(100vw, (100vh - 100px));
  grid-template-rows: 50px min(100vh - 100px, 100vw) 50px;
  height: 100%;
  justify-content: center;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

​