高度100%的高宽比-欺骗父母

Question

我有一个父/包装容器，其中的高度依赖于宽度，因此它使用了通常用于iframes和视频的有用的aspect-ratio trick；也就是说，将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>

​