是否可以同时使用top，left，right和bottom css来调整元素的大小？ [英] Is it valid to use top, left, right, and bottom css all at the same time to size an element?
问题描述
我以前见过它，并且已经完成了，所以我知道它的工作原理非常一致，但是，我想知道这是否有效，以及是否存在我没有想到的警告。
例如： http://jsfiddle.net/sfctB/67/ 我最近为一个FF溢出问题的人提供了这种修复方法，这是由一个盒子尺寸属性造成的。添加简单的-moz-前缀固定它，但我选择了一些似乎对我更有效的东西。我在内容div上设置顶部和底部，以便始终在固定页眉和固定页脚之间延伸。然后设置边距以避免溢出。
我会直觉地认为，同时使用顶部和底部或者左右使用会导致问题，但是，它看起来似乎当已经有一个左侧已经说明并做出底部行为时，如果已经有一个顶部说明，那么做就像宽度那样。
但这是有效，我应该在考虑长期支持时使用它吗？
code
html，body {
height：100％;
宽度：100％;
overflow：hidden;
}
body {
padding：60px 0px;
身高：100％;
}
.header {
height：60px;
背景：＃000;
颜色：#fff;
宽度：100％;
位置：固定;
top：0;
}
.body {
overflow-y：scroll;
位置：固定;
bottom：0;
top：60px;
保证金：0 0 60px 0;
}
.footer {
height：60px;
背景：＃000;
位置：固定;
bottom：0px;
宽度：100％;
颜色：#fff;
}
<！DOCTYPE html>
< html>
< head>< / head>
< body>
< div class =header>这是标题< / div>
< div class =body> [content here]< / div>
< div
class =footer>这是页脚< / div>
< / body>
< / html>
好的问题。我很长一段时间想知道这个，所以我去了规范（ http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width 和 http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height ）。看起来这是一个完整的拼写，答案就是你所期望的。对于一个绝对定位的元素，如果宽度是自动，并且定义了左右，则：
5。 'width'是'auto'，'left'和'right'不是'auto'，然后解决'width'
高度相似：
5。 'height'是'auto'，'top'和'bottom'不是'auto'，那么'margin-top'和'margin-bottom'的'auto'值被设置为0并且解决'height'
然而，我认为tPlummer是一个很好的观点。规范和现实可能是两回事;特别是当涉及到旧版浏览器时。
I have seen it before and have done it so I know it works pretty consistently, however, I want to know if that is valid and if there are caveats that I have not thought of.
example: http://jsfiddle.net/sfctB/67/ I offered this fix for someone with a FF overflow problem recently, which was caused by a box-sizing property. Adding the simple -moz- prefix fixed it as well but I opted for something that seemed more valid to me. I set the top and bottom on a content div so that it always stretches between a fixed header and fixed footer. Then set margins to avoid the overflow.
I would intuitively think that using top and bottom or right and left at the same time would cause problems, however, what it seems to do is make right act kind of like width when there is a left already stated and make bottom act kind of like height when there is already a top stated.
But is this valid and should I use it when considering long term support?
code
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>
Good question. I've wondered about this for a long time, so I went to the spec ( http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width and http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height). It looks like it's a fully spelled out and the answer is what you'd expect it to be. For an absolutely positioned element if width is "auto" and left and right are defined then:
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
Similarly for height:
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'
I think tPlummer makes a good point, however. The spec and reality may be two different things; especially when it comes to older browsers.
这篇关于是否可以同时使用top，left，right和bottom css来调整元素的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
