当前位置： 移动技术网 > IT编程>网页制作>CSS > css relative设置top为百分比值

css relative设置top为百分比值

2018年02月27日  | 移动技术网IT编程  | 我要评论

前言：

最近在学习HTML、CSS的过程中，想模仿一下百度首页。发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化（效果如下图所示），于是自己研究了一下并记录下来。

效果实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>垂直伸缩</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}

		body,html{
			height: 100%;
		}

		.content{
			min-width: 810px;
			min-height: 600px;
			height: 100%;
			border: 1px dashed green;
		}

		.wrap{
			width: 100%;
			height: 191px;
			border: 1px solid blue;
			position: relative;
			top: 38.2%;
		}

		.wrap-content{
			width: 100%;
			height: 191px;
			background-color: red;
			position: relative;
			top: -191px;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="wrap">
			<div class="wrap-content">
			</div>
		</div>
	</div>
</body>
</html>

 分析

利用的原理：

  1. 百分比值的计算方式：实际值 = 具有确定宽高的祖先元素的宽高 * 百分比值。默认情况下，块级元素的宽为100%，高度则是根据内容来计算。所以如果祖先元素没有确定了高度的，那么百分比值也无法确定，它的值会被设置为0。
  2. 如果设置了html元素的高度为height: 100%;那么html元素的高度会随着viewport的高度改变。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网