今天才知道原來position加上上下左右可以控制的到div的寬度的 比如我現在有一個需要 這樣一個需求 現在是紅色部分50px 但是你可能不知道剩下的藍色部分的高度是多少 藍色部分要怎麼填滿剩餘的高度呢 這時候left,right,top,bottom,就很有用了 直接給藍色的div：positi ...
今天才知道原來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>
