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/post/8010.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知