CSS Grid使用特定的项目高度作为最大行高度

debugcn 发表于 Dev

疯了

我试图防止边栏高度超过内容高度。
“区域”将包含任何高度的图像，因此其高度不固定或事先未知。

function toggleTabsContent() {
	const display = document.querySelector('.content').style.display;
  if (display == "none") {
  	document.querySelector('.content').style.display = "block";
  } else {
  	document.querySelector('.content').style.display = "none";
  }
}

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "tabs area"
    "footer footer";
}

.tabs {
  grid-area: tabs;
  background: #FF9800;
}

.area {
  grid-area: area;
  height: 200px;
  background: #673AB7;
}

.footer {
  grid-area: footer;
  background: #607D8B;
  height: 40px;
}

.content {
  height: 250px;
}

<button onclick="toggleTabsContent()">Make tabs taller/shorter</button>

<div class="grid">
  <div class="tabs">
    <div class="content" style="display: none"></div>
  </div>
  <div class="area"></div>
  <div class="footer"></div>
</div>

JSFiddle

陪同Afif

height:0;min-height:100%;在tabs元素上使用。这将确保元素的高度不会影响其轨道的大小，然后通过添加min-height:100%您强制其使用其他元素定义的轨道的高度来：

function toggleTabsContent() {
	const display = document.querySelector('.content').style.display;
  if (display == "none") {
  	document.querySelector('.content').style.display = "block";
  } else {
  	document.querySelector('.content').style.display = "none";
  }
}

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "tabs area"
    "footer footer";
}

.tabs {
  grid-area: tabs;
  background: #FF9800;
  height:0;
  min-height:100%;
  overflow:auto;
}

.area {
  grid-area: area;
  height: 200px;
  background: #673AB7;
}

.footer {
  grid-area: footer;
  background: #607D8B;
  height: 40px;
}

.content {
  height: 250px;
}

<button onclick="toggleTabsContent()">Make tabs taller/shorter</button>

<div class="grid">
  <div class="tabs">
    <div class="content" style="display: none"></div>
  </div>
  <div class="area"></div>
  <div class="footer"></div>
</div>

相关问题：如何将外部div的高度设置为始终等于特定的内部div？

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。