我想要一个元素相对于窗口的四个边有固定的位置,并且具有“display:table”的属性。
但是,如果我尝试给我的div同时设置“position:fixed”和“display:table”属性,那么“right”和“bottom”属性将被忽略。
我可以通过添加一个额外的包装器来实现我的目标:
但是,如果我尝试给我的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)上运行。
body
替换那个包装的div
:P - BoltClockposition
和偏移量的工作方式也不同。规范已经很好地涵盖了这一点:http://www.w3.org/TR/CSS21/tables.html#model 如果您将position: fixed
更改为position: absolute
而不使用包装元素,则会发现滚动条会为元素的宽度和高度额外增加40像素。 - BoltClock