Question

我正在尝试为div创建一个顶部和底部边距，当我只指定底部边距时，它可以正常工作：

＆＃13;

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

＆＃13;

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

＆＃13;

然而，当我添加上边距时，底部边距突然根本不起作用 - 它几乎就像它不再读取它一样：

＆＃13;

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

＆＃13;

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

＆＃13;

关于可能导致此问题的任何想法？

Answer 1

这是因为您还height声明了100%，但25px top与150px bottom之间无法生效}。冲突导致其中一个规则被忽略，通常是最旧的规则。

删除height以解决此问题。您现在不需要它可以从top和bottom自动计算高度：

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

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

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

1 个答案: