html – 同时使用top,left,right和bottom css来调整元素大小是否有效？_html-js-css

概述我之前已经看过它并且已经完成了所以我知道它的工作非常一致,但是,我想知道这是否有效以及是否有一些我没有想过的警告. 例如：http://jsfiddle.net/sfctB/67/我最近为遇到FF溢出问题的人提供了此修复程序,这是由box-sizing属性引起的.添加简单的-moz-前缀也修复了它,但我选择了对我来说更有效的东西.我在内容div上设置顶部和底部,使其始终在固定页眉和固定页脚之间伸展我之前已经看过它并且已经完成了所以我知道它的工作非常一致,但是,我想知道这是否有效以及是否有一些我没有想过的警告.

例如：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 >This is header</div>        <div >[content here]</div>        <div        >This is 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).它看起来像是完全拼写出来的,答案就是你所期望的.对于绝对定位的元素,如果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提出了一个很好的观点.规范和现实可能是两件不同的事情;特别是在旧版浏览器方面.

总结

以上是内存溢出为你收集整理的html – 同时使用top,left,right和bottom css来调整元素大小是否有效？全部内容，希望文章能够帮你解决html – 同时使用top,left,right和bottom css来调整元素大小是否有效？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1084366.html

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

发表评论

评论列表（0条）