固定位置和表格显示的元素

Question

我想要一个元素相对于窗口的四个边有固定的位置，并且具有“display:table”的属性。

但是，如果我尝试给我的div同时设置“position:fixed”和“display:table”属性，那么“right”和“bottom”属性将被忽略。

我可以通过添加一个额外的包装器来实现我的目标：

<div id=w>
  <div id=a>
    <div id=b>B</div>
    <div id=c>C</div>
  </div>
</div>

#w {
   position: fixed;
   top: 40px; left:40px; right: 40px; bottom: 40px;
}
#a{
  display: table;
  width:100%; height:100%;
}
#b {
  display: table-row;
  background: red;
  height:40%;
}
#c {
  display: table-row;
  background: yellow;
}

演示链接

但我不想在我的HTML中有无用的div。是否有一种方法可以在没有#w div的情况下实现呢？HTML应该为：

  <div id=a>
    <div id=b>B</div>
    <div id=c>C</div>
  </div>

需要使用类似:before伪元素的CSS技巧。

解决方案必须在IE9+，Firefox和Chrome（ium）上运行。

- Denys Séguret

---

你总是可以用 body 替换那个包装的 div :P - BoltClock

@BoltClock'saUnicorn 在我的真实页面中除了那些div之外还有很多其他的东西。 - Denys Séguret

好的。至于为什么不使用包装器似乎无法正常工作，那是因为对于表格，即使是块级表格，position和偏移量的工作方式也不同。规范已经很好地涵盖了这一点：http://www.w3.org/TR/CSS21/tables.html#model 如果您将 position: fixed 更改为 position: absolute 而不使用包装元素，则会发现滚动条会为元素的宽度和高度额外增加40像素。 - BoltClock

你可能想在一个没有评论的问题上进行测试，比如https://dev59.com/hn3aa4cB1Zd3GeqPitrk - 目前我会收到所有你的评论通知，因为我是这个线程中唯一的其他用户。 - BoltClock

Answer 1

这里有一个使用calc()的解决方案——我不确定它是否是最好的解决方案（事实上，我相当肯定它不是），但它能够正常工作。 MDN calc（法语）

#a { 
   position: fixed;
   display: table;
   height: calc(100% - 80px);
   width: calc(100% - 80px);
   top: 40px; left:40px; right: 40px; bottom: 40px;
}

#b {
  display: table-row;
  background: red;
  height:40%;

}
#c {
  display: table-row;
  background: yellow;
}

演示

- rlemon

---

+1 但是... 我希望它很好，但遗憾的是，它无法在IE9上运行 :( - Denys Séguret

@dystroy 在 http://caniuse.com/calc 上可以看到它“有些”支持。但是正如文档所说，这应该适用于IE9。 - rlemon

Answer 2

不使用CSS表格的类似布局

您可以使用块级元素实现相同的布局，而无需包装元素：

<div id=a>
    <div id=b>B</div>
    <div id=c>C</div>
</div>

#a {
    position: fixed;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    border: 1px solid blue;
}
#b {
    background: red;
    width: 100%;
    height:40%;
}
#c {
    position: absolute;
    top: 40%;
    left: 0;
    bottom: 0;
    width: 100%;
    background: yellow;
}

然而，我没有使用CSS表格显示类型，在某些情况下可能严格要求使用。

正如其他人早先指出的那样，您需要使用包装器、calc()或JavaScript来启用表格布局。

这种替代方法可能对其他人有帮助。

演示： http://jsfiddle.net/audetwebdesign/8qpjZ/

- Marc Audet

---

我制作了一个简化的示例来解释我的问题，但我真的需要基于display:table的布局。感谢有用的建议（对其他人来说）。 - Denys Séguret

我理解您的限制，同时我认为您最初使用包装器的解决方案是最佳途径。 - Marc Audet