css3自适应fill-available

时间：6年前阅读：5614

　　width:fill-available表示撑满可用空间

　　举例来说，页面中一个<div>元素，该<div>元素的width表现就是fill-available自动填满剩余的空间

　　出现fill-available关键字值的价值在于，可以让元素的100%自动填充特性不仅仅在block水平元素上，也可以应用在其他元素

　　下面的例子中，inline-block元素宽度撑满了可用宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
#tt{
	background-color: pink;
  display:inline-block;
  width:-webkit-fill-available;
}
		</style>
	</head>
	<body>
<div id="tt">自适应总结</div>
	</body>
</html>

类似的高度也有此特性

　　下面的例子中，div元素高度撑满了可用高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#dd{
				height: 100px;
			}
#tt{
  background-color: pink;
  height:-webkit-fill-available;
}
		</style>
	</head>
	<body>
		<div id="dd">
	<div id="tt">自适应总结</div>		
		</div>

	</body>
</html>

等高布局

　　于是，利用fill-available可以轻松地实现等高布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#dd{
				height: 100px;
			}
.tt{
   width:100px;
  height:-webkit-fill-available;
  margin:0 10px;
  display: inline-block;
  vertical-align: middle;
  background-color: pink;
}
		</style>
	</head>
	<body>
		<div id="dd">
		<div class="tt">首页</div>
		<div class="tt">Html/Css</div>
		<div class="tt">JavaScript</div>
		</div>

	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css3自适应fill-available

网友评论