相关疑难解决方法(0)

我有一个有两列的布局 - 左边div和右边div.

右边div有灰色background-color,我需要它根据用户浏览器窗口的高度垂直展开.现在是background-color最后一段内容的结尾div.

我试过了height:100%,min-height:100%;等等

我尝试设置minmax()，grid-template-rows有趣的是，结果是网格行扩展到 的最大值minmax()而不是最小值。

我们怎样才能使网格行保持在最小声明大小，并且稍后如果添加更多内容 - 网格行将扩展到最大声明大小而不是更多？

这是一个例子：

body {
  background: gray;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: minmax(50px, 150px);
}

aside {
  border-right: solid 1px red;
}

aside.homepage {
  background: blue;
}

<aside></aside>
<aside class="homepage">
  <header></header>
  <main></main>
  <footer></footer>
</aside>
<aside></aside>

I am trying to create two buttons that each toggle a specific column when using CSS grid.

• I have a simply grid that toggles the width of first and last columns. (See snippet)

• I want to be able to toggle the column widths independantly (Without further javascript).

• Because the active class is applied to the container each column cannot infer the active state of the other.

• With flex the active class would be applied to the column (e.g …