高度100％的宽高比欺骗父母

Question

我有一个父/包装容器，其中高度取决于宽度，因此它使用经常用于iframe和视频的有用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

  

我想要的是文本显示在框内，并且红色背景颜色填充框的整个高度。

声音就像你希望内盒完全位于填充技巧框上方。如果是这种情况，只需添加sudo certbot --apache属性就可以实现这一点。

＆＃13;

＆＃13;

position

＆＃13;

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);
	}
};

＆＃13;

* {
	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;
}

＆＃13;

＆＃13;

＆＃13;