css - 高宽比技巧父级的 100%

Question

我有一个父/包装容器，其中高度取决于宽度，因此它使用了通常用于 iframe 和视频的有用纵横比技巧；也就是说，设置 ieheight: 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>

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

标签： cssheightaspect-ratio

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>