Высота 100% родительского трюка

Question

У меня есть родительский / упаковочный контейнер, высота которого зависит от ширины, поэтому он использует полезный трюк с соотношением сторон , часто используемый для фреймов и видео;то есть установка т.е. height: 0, padding-top: 53.3% для 16: 9.

Моя проблема сейчас в том, что у меня есть ребенок внутри этой оболочки, который должен иметь height: 100%.Но это не учитывает отступы, что приводит к появлению дочернего элемента без роста с переполнением.

Этот фрагмент кода иллюстрирует мою проблему:

let
	box = document.querySelector('.aspect-ratio')
;
document.querySelector('[name="toggle"]').onclick = function(){
	let
		padding_trick = 'height-0'
	;
	if (box.classList.contains(padding_trick)) {
		box.classList.remove(padding_trick);
	} else {
		box.classList.add(padding_trick);
	}
};

* {
	box-sizing: border-box;
}

.controller {
	margin-bottom: 15px;
}

.wrapper {
	position: relative;
	width: 400px;
}

.aspect-ratio {
	background-color: beige;
}

.aspect-ratio.height-0 {
	height: 0;
	padding-top: 53.3%;
}

.inner {
	background-color: tomato;
	height: 100%;
	border: 1px solid #222;
}

<div class="root">
	<div class="controller">
		<button name="toggle">Toggle padding-trick</button>
	</div>
	<div class="wrapper">
		<div class="aspect-ratio height-0">
			<div class="inner">
				<p>Bordered content height is not 1oo%.</p>
			</div>
		</div>
	</div>
</div>

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

Answer 1

Я хотел бы, чтобы текст появлялся внутри рамки, а красный фоновый цвет заполнял всю высоту рамки.

Звучит так, будто вы хотите, чтобы внутреннийкоробка абсолютно расположена над коробкой трюков.Если это так, это можно сделать, просто добавив атрибуты position.

let
	box = document.querySelector('.aspect-ratio')
;
document.querySelector('[name="toggle"]').onclick = function(){
	let
		padding_trick = 'height-0'
	;
	if (box.classList.contains(padding_trick)) {
		box.classList.remove(padding_trick);
	} else {
		box.classList.add(padding_trick);
	}
};

* {
	box-sizing: border-box;
}

.controller {
	margin-bottom: 15px;
}

.wrapper {
	position: relative;
	width: 400px;
}

.aspect-ratio {
	background-color: beige;
}

.aspect-ratio.height-0 {
	height: 0;
	padding-top: 53.3%;
  position: relative;
}

.inner {
	background-color: tomato;
	height: 100%;
	border: 1px solid #222;
}

.height-0 .inner {
  position: absolute;
  top: 0;
}

<div class="root">
	<div class="controller">
		<button name="toggle">Toggle padding-trick</button>
	</div>
	<div class="wrapper">
		<div class="aspect-ratio height-0">
			<div class="inner">
				<p>Bordered content height is not 1oo%.</p>
			</div>
		</div>
	</div>
</div>