Question

我希望有一个相对于窗口四边固定位置的元素，并使用display:table。

但是，如果我尝试将position:fixed和display:table属性都提供给我的div，则会忽略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;
}

Working Fiddle

但我不喜欢在HTML中使用无用的div。没有那个#w div，有没有办法做到这一点？ HTML应该是

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

（像:before伪元素这样的CSS技巧就可以了。）

解决方案必须适用于IE9 +，Firefox和Chrom（e | ium）。

Answer 1

这是一个使用calc()的解决方案 - 我不确定它是最好的解决方案（实际上我很确定它不是，但它有效）

MDN calc （French）

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

DEMO

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/

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

2 个答案:

不使用CSS表的类似布局