html css fill,css3自适应fill-available

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

举例来说，页面中一个

元素，该

元素的width表现就是fill-available自动填满剩余的空间

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

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

#tt{

background-color: pink;

display:inline-block;

width:-webkit-fill-available;

}

自适应总结

类似的高度也有此特性

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

#dd{

height: 100px;

}

#tt{

background-color: pink;

height:-webkit-fill-available;

}

自适应总结

等高布局

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

#dd{

height: 100px;

}

.tt{

width:100px;

height:-webkit-fill-available;

margin:0 10px;

display: inline-block;

vertical-align: middle;

background-color: pink;

}

首页

Html/Css

JavaScript