还有一种方案就是，可以通过新增一个新的元素(空的颜色块，主要用于小黑条高度的占位)，然后吸底元素可以不改变高度只需要调整位置，像这样：

　　{

　　margin-bottom: constant(safe-area-inset-bottom);

　　}

　　空的颜色块：

　　{

　　position: fixed;

　　bottom: 0;

　　width: 100%;

　　height: constant(safe-area-inset-bottom);

　　background-color: #fff;

　　}

　　类型二：fixed 非完全吸底元素(bottom ≠ 0)，比如 “返回顶部”、“侧边广告” 等

　　像这种只是位置需要对应向上调整，可以仅通过外边距 margin 来处理：

　　{

　　margin-bottom: constant(safe-area-inset-bottom);

　　}

　　或者，你也可以通过计算函数 calc 覆盖原来 bottom 值：

　　{

　　bottom: calc(50px(假设值) + constant(safe-area-inset-bottom));

　　}

　　别忘了使用 @supports

　　写到这里，我们常见的两种类型的 fixed 元素适配方案已经了解了吧，但别忘了，一般我们只希望 iPhoneX 才需要新增适配样式，我们可以配合 @supports 这样编写样式：

　　@supports (bottom: constant(safe-area-inset-bottom)) {

　　div {

　　margin-bottom: constant(safe-area-inset-bottom);