проблема высоты (переполнение) с 3 колонками

Question

html,body{
  height: 100%;
}
#app{
  height: 100%;
  border: 2px solid black;
}
.row{
	display: flex;
	height: 100%;
}
.col-3 {
	width: 20%;
	background: red;
}
.col-6 {
	width: 60%;
	background-color:blue;
}
#large-item{
  height: 100%;
  width: 100%;
  background: yellow;
  
}

<div id="app">
	<div class="row">
		<div class="col-3">
			<h2>left column</h2>
		</div>
		<div class="col-6">
			<h2>middle column</h2>
      <div id="large-item">Large item</div>
		</div>
		<div class="col-3">
			<h2>right column</h2>
		</div>
	</div>
  </div>

Я создаю макет из 3 столбцов, следуя инструкциям w3cschools.Проблема в том, что если я установлю html, рост тела на 100%, большой элемент в столбцах будет переполнен, что ужасно.Как я могу сделать его отзывчивым, как автоматическое добавление полосы прокрутки, а цвет фона по-прежнему заполняет столбцы?

Answer 1

Я бы посоветовал вам установить высоту .col-6 > h2 в 30px и #large-item height в calc(100% - 70px);.Мы вычитаем 70px, потому что 30px это высота h2, а 20px это поле h2 (top + bottom = 40px).Таким образом, 30px + 40px - это 70px, что нам нужно вычесть.

Обновление 1: Вам потребуется добавить родительский контейнер для большого элемента, чтобы увидеть полосу прокрутки, когда она имеет большесодержание.И установите его высоту calc(100% - 70px); и установите overflow:auto;.Чтобы увидеть полосу прокрутки, вы можете установить высоту большого элемента на 500px (например) ..

См. Фрагмент.

html,body{
  height: 100%;
}
#app{
  height: 100%;
  border: 2px solid black;
}
.row{
	display: flex;
	height: 100%;
}
.col-3 {
	width: 20%;
	background: red;
}
.col-6 {
	width: 60%;
	background-color:blue;
}
#large-item-container{
  overflow:auto;
  height: calc(100% - 70px);
}
.col-6 > h2{
  height:30px;
}
#large-item{
  height:500px;
  width: 100%;
  background: yellow;
  
}

<div id="app">
	<div class="row">
		<div class="col-3">
			<h2>left column</h2>
		</div>
		<div class="col-6">
			<h2>middle column</h2>
      <div id="large-item-container">
        <div id="large-item">Large item</div>
      </div>
		</div>
		<div class="col-3">
			<h2>right column</h2>
		</div>
	</div>
  </div>

https://jsfiddle.net/nimittshah/rkuf49np/1/

Если вы хотите добавить полосу прокрутки для всего col-6, то это еще проще.Вам не нужен контейнер для больших предметов.

См. this

Наслаждайтесь!:)

Answer 2

Вы просто измените высоту large item на 92%.

92% - самая близкая к высоте других столбцов.

html,body{
  height: 100%;
}
#app{
  height: 100%;
  border: 2px solid black;
}
.row{
    display: flex;
    height: 100%;
}
.col-3 {
    width: 20%;
    background: red;
}
.col-6 {
    width: 60%;
    background-color:blue;
}
#large-item{
  height: 92%;
  width: 100%;
  background: yellow;
}