当前位置： 移动技术网 > IT编程>网页制作>CSS > position+left+bottom+top+right

position+left+bottom+top+right

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

今天才知道原来position加上上下左右可以控制的到div的宽度的

比如我现在有一个需要

这样一个需求

现在是红色部分50px

但是你可能不知道剩下的蓝色部分的高度是多少

蓝色部分要怎么填满剩余的高度呢 这时候left,right,top,bottom,就很有用了

 

直接给蓝色的div：position:absolute;top:50px;bottom:0;left:0;right:0

给这个样式蓝色部分就填满了除了红色部分的高度跟宽度了

 

然后黄色部分要在蓝色部分里面水平垂直居中，那网上就有很多方案了

 

 

 

 

要解决这个问题还有一个方案

<div style="display: flex;flex-direction: column;height: 100vh">
<div style='height:50px;background-color: red'></div>
<div style='flex: 1;background-color: blue;display: flex;justify-content: center;align-items: center;'>
<div style='height:50px;width:50px;background-color: yellow;'></div>
</div>
</div>

 

您可能感兴趣的文章:

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

相关文章:

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