是否有效同时使用top,left,right和bottom css来调整元素的大小？

Question

我之前已经看过它并且已经完成了所以我知道它的工作非常一致,但是,我想知道这是否有效以及是否有一些我没有想过的警告.

例如:http://jsfiddle.net/sfctB/67/我最近为遇到FF溢出问题的人提供了此修复程序,这是由box-sizing属性引起的.添加简单的-moz-前缀也修复了它,但我选择了对我来说更有效的东西.我在内容div上设置顶部和底部,使其始终在固定页眉和固定页脚之间伸展.然后设置边距以避免溢出.

我会直觉地认为同时使用顶部或底部或左右两侧会产生问题,然而,它似乎做的就是当有一个左边已经说过并且使底部行为有点像已经有顶级的高度.

但这是否有效,我应该在考虑长期支持时使用它吗？

码

html, body {
    height:100%;
    width:100%;
    overflow:hidden;
}
body {
    padding: 60px 0px;
    height: 100%;
}
.header {
    height:60px;
    background:#000;
    color:#fff;
    width: 100%;
    position: fixed;
    top:0;
}
.body {
    overflow-y: scroll;
    position:fixed;
    bottom:0;
    top:60px;
    margin: 0 0 60px 0;
}
.footer {
    height:60px;
    background:#000;
    position:fixed;
    bottom:0px;
    width:100%;
    color:#fff;
}



<!DOCTYPE html>
<html>

    <head></head>

    <body>
        <div class="header">This is header</div>
        <div class="body">[content here]</div>
        <div
        class="footer">This is footer</div>
    </body>

</html>

Answer 1

好问题.我想知道这很长一段时间,所以我去规范(http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width和HTTP:// WWW. w3.org/TR/CSS2/visudet.html#abs-non-replaced-height).它看起来像是完全拼写出来的,答案就是你所期望的.对于绝对定位的元素,如果width是"auto"并且左右定义则:

5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'

高度相似:

5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'

不过,我认为tPlummer提出了一个很好的观点.规范和现实可能是两件不同的事情; 特别是在旧版浏览器方面.