Html 具有固定位置和显示表的元素

我想要一个元素，它相对于窗口的四个侧面具有固定的位置，并且具有

display:table

但是，如果我尝试将

位置：fixed

和

显示：table

属性都提供给div，那么

右侧

和

底部

属性将被忽略

我可以通过额外的包装来实现我的目标：

<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;
}

（CSS技巧，如

：before

伪元素就可以了）

---

该解决方案必须在IE9+、Firefox和Chrom（e | ium）上运行。

这里有一个使用

calc（）的解决方案。

-我不确定它是否是最好的解决方案（事实上，我很确定它不是，但它可以工作）

（）

不使用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;
}

B
C
#a{
位置：固定；
顶部：40px；
左：40px；
右：40px；
底部：40px；
边框：1px纯蓝色；
}
#b{
背景：红色；
宽度：100%；
身高：40%；
}
#c{
位置：绝对位置；
最高：40%；
左：0；
底部：0；
宽度：100%；
背景：黄色；
}

然而，我并没有使用CSS表格显示类型，在某些情况下，这可能是严格要求的，也可能不是

正如前面提到的，您需要一个包装器，

calc（）

或JavaScript来启用此表布局

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

---

演示：

您始终可以用

body

替换该包装

div

：P@BoltClock在我的真实页面中，除了那些div之外，还有很多东西。这很公平。至于为什么除非使用包装器，否则这似乎不起作用，这是因为

position

和偏移对表（甚至是块级表）的作用不同。规范很好地涵盖了这一点：如果您在不使用包装器元素的情况下将

position:fixed

更改为

position:absolute

，您将看到滚动条是为元素宽度和高度的额外40px生成的。您可能希望测试一个没有注释的问题，例如-现在我收到你所有评论的通知，因为我是这个帖子中唯一的其他用户。+1但是。。。我希望它是好的，但遗憾的是，它在IE9上不起作用：（@dystroy你可以得到“某种程度上”的支持。不过就像文档所说的，这应该适用于IE9。我用一个简单的例子来解释我的问题，但我真的需要一个显示：基于表格的布局。+1用于有用的建议（对于其他人）不过，我很欣赏你的限制，我认为你最初使用包装器的解决方案是最好的方法。

#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;
}

<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;
}