CSS Указание использования сетки c высота элемента как максимальная высота строки - PullRequest
Новая
       3

CSS Указание использования сетки c высота элемента как максимальная высота строки

3 голосов
/ 29 февраля 2020

Я пытаюсь не допустить, чтобы высота боковой панели превышала высоту содержимого.
«Область» будет содержать изображение любой высоты, поэтому его высота не фиксирована или не известна заранее. 

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

Ответы [ 4 ]

2 голосов
/ 27 марта 2020

Display: flex; обеспечивает большую гибкость - фактически его цель - точно согнуть высоту или ширину до требуемых размеров в соответствии с содержимым внутри.

Исходя из вашего вопроса, это именно то, что вам нужно.

Я отделил ваш нижний колонтитул от сетки, чтобы отделить элементы статического размера от тех, которые вы будете sh flex.

Далее я добавил минимальную ширину вашей области, чтобы избежать ее полного разрушения. Однако, если вы хотите эту функциональность, вы можете удалить это. т. е. если вы хотите, чтобы при отсутствии изображения оно не появлялось, вы можете удалить его.

Наконец, display: flex; и flex-flow: row nowrap; позволяют сгибать размеры и для элементов в сетке ( теперь с именем «flex») для размещения рядом друг с другом с одинаковыми размерами, и они не будут перенесены на следующую строку для учета изменений размеров. 

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";
  }
}
.flex {
  display: flex;
  flex-flow: row nowrap;
}

.tabs {
  background: #FF9800;
  height: auto;
  width: 100%;
}

.area {
  height: auto;
  min-height: 200px;
  width: 100%;
  background: #673AB7;
}

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

.content {
  height: 400px;
}
<button onclick="toggleTabsContent()">Make tabs taller/shorter</button>

<div class="flex">
  <div class="tabs">
    <div class="content" style="display: none"></div>
  </div>
  <div class="area"></div>
</div>
<div class="footer"></div>
1 голос
/ 27 марта 2020

Используйте 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?

0 голосов
/ 27 марта 2020

Вы должны go гибкий маршрут, но если единственным содержимым в .tabs является изображение, вы можете установить его как background-image и позволить ему автоматически заполнять область background-size: cover. 

document.getElementById("slider").addEventListener('change', changeAreaHeight);

function changeAreaHeight(event) {
  let sliderValue = event.target.value;
  document.querySelector('.area').style.height = sliderValue + 'px';
}
.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;
  background-image: url('https://i.picsum.photos/id/167/100/300.jpg'); /* NEW */
  background-size: cover; /* NEW */
}

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

.footer {
  grid-area: footer;
  background: #607D8B;
  height: 40px;
}
<input type="range" id="slider" min="50" value="200" max="800" />
<label>Change height on .area</label>

<div class="grid">
  <div class="tabs">
    <div class="content" style="display: none"></div>
  </div>
  <div class="area"></div>
  <div class="footer"></div>
</div>
0 голосов
/ 29 февраля 2020

Вы можете установить максимальную высоту tabs равной высоте area

.tabs {
  grid-area: tabs;
  background: #FF9800;
  max-height: 400px;
  overflow: scroll;
}

Я добавил много элементов H1, и все заработало так, как вы хотели.

JS Скрипка

...