Question

我正在构建一个具有100％高度/宽度/全屏布局的Web应用程序。我正在寻找一个CSS技巧，根据其高度按比例调整元素尺寸。

现在我正在寻找相当于这个技巧对x轴的作用：

＆＃13;

html, body{
	height:100%;
	margin:0;
}
#view {
	min-height: 100%;
	position: relative;
	width: 100%;
  background-color: #333333;
}

#test-hld {
  position: absolute;
	display: flex;	
	align-items: center;
	justify-content: center;
	background-color: tomato;
	width: 100%;
	height: 75%;
}

.test{
	position: relative;
	width: 30%;		
}

.test:before{
	content: "";
	display: block;
	padding-top: 75%;
}

.content{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: black;
}

＆＃13;

<div id="view">
	<div id="test-hld">
		<div class="test">
			<div class="content"></div>
		</div>
	</div>
</div>

＆＃13;

但是更改（例如）.test{height: 80%}和.test:before{padding-left: 75%}会使浏览器根本不呈现框的尺寸。

我的问题 为什么反面不起作用？使用CSS设置元素高度有什么基础吗？ flex / flexbox可以解决这个问题吗？

我知道可以通过一些JS来解决这个问题，但是我不能相信它不能用CSS做，直到有人拍我的脸让我变得真实的

Answer 1

首先，只是想知道为什么填充技巧有效。

填充顶部和填充底部是垂直尺寸，与容器的宽度（因此，水平尺寸）相关。

允许元素的比例固定，并与容器的宽度相关。但是没有任何水平尺寸与容器的某些垂直方向相关，因此高度上的等效技巧现在是不可能的。

我试图使用其他技术获得相同的结果，但我取得了非常大的成功。

我失败的尝试是尝试使用图像来设置比率

body, html {
  height: 99%;
}

.base {
  height: 40%;
  border: solid 1px green;
  display: inline-block;
  position: relative;
}

.ratio {
  content: url("http://placehold.it/400x200");
  opacity: 0.05;
  height: 100%;
  width: auto;
  position: relative;
}

<div class="base">
<img class="ratio" />
</div>

这适用于IE和Chrome，但在FF中失败。但只是在初始加载时。

在重新加载页面之前，更改浏览器大小将不起作用。我只是无法弄清楚为什么，或者如何解决它

使用CSS＆＃34;填充技巧＆＃34;在Y轴上按比例调整大小？

1 个答案: