6

我以前见过它并且已经做过，所以我知道它的工作原理非常一致，但是，我想知道这是否有效，以及是否有我没有想到的警告。

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

我直觉地认为同时使用 top 和 bottom 或 right 和 left 会导致问题，但是，它似乎做的是在已经说明左的情况下使右行为有点像宽度，并使底部行为有点像当已经有一个顶部时的高度。

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

代码

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>
4

2 回答 2

12

好问题。我想知道这个问题很久了，所以我去了规范（http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width和http://www. w3.org/TR/CSS2/visudet.html#abs-non-replaced-height）。看起来它是一个完整的拼写，答案就是你所期望的。对于绝对定位的元素，如果宽度为“auto”并且定义了 left 和 right，则：

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 提出了一个很好的观点。规格和现实可能是两个不同的东西；尤其是对于较旧的浏览器。

于 2013-01-28T20:29:44.950 回答
0

就我而言，这是有效的加价。我已经看到该padding属性在 IE 中存在问题，但是，在大多数情况下，这也是 IE。

于 2013-01-28T20:01:40.543 回答