与底部结合时CSS底部不起作用？

Question

我试图创建一个div顶部和底部边缘，当我只指定下边距是否能够正常工作：

#RightBar{ 
 
    display: block; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 25px; 
 
    bottom: 150px; 
 
    right: 0px; 
 
    background: Aqua; 
 
}

<div id="RightBar"></div>

但是当我添加上边距，底部保证金突然不能在所有的工作 - 这是几乎一样，如果它不再读取它：

#RightBar{ 
 
    display: block; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 25px; 
 
    bottom: 150px; 
 
    top: 25px; 
 
    right: 0px; 
 
    background: Aqua; 
 
}

<div id="RightBar"></div>

有什么想法可能会导致此？

Answer 1

那是因为你也有height声明100%，不能你25pxtop和你150pxbottom之间的配合。冲突导致其中一个规则被忽略，通常是最老的规则。

删除height来解决这个问题。你不需要它现在的高度可以自动从top和bottom计算：

#RightBar{ 
 
    display: block; 
 
    position: fixed; 
 
    width: 25px; 
 
    top: 25px; 
 
    bottom: 150px; 
 
    right: 0px; 
 
    background: Aqua; 
 
}

<div id="RightBar"></div>