Margin-top：100％获取父宽度值...奇怪 [英] Margin-top: 100% gets parent width value... strange
问题描述
我有很奇怪的问题，在大多数浏览器（即ff，chrome，safari）。
以下是示例代码：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< style type =text / css>
html {
outline：1px＃0ff solid;
background：rgba（0,255,255,0.1）;
}
body {
margin：0;
padding：0;
outline：1px＃00f solid;
background：rgba（0,0,255,0.1）;
}
#aDiv {
width：300px;
outline：1px＃f00 solid;
background：rgba（255,0,0,0.2）;
}
#bDiv {
margin-top：100％;
outline：1px＃0f0 solid;
background：rgba（0,255,0,0.1）;
}
< / style>
< / head>
< body>
< div id =aDiv>
< div id =bDiv>
content
< / div>
< / div>
< / body>
< / html>
当您更改#aDiv宽度时，#bDiv margin-top会以相同的值更改。
我不知道怎么可能，那个高度到宽度。
最好的问候;）
D。
p>
< percentage>百分比是相对于生成的框的包含块的
的宽度计算的。注意，这也适用于
'margin-top'和'margin-bottom'。如果包含块的
宽度取决于这个元素，那么结果布局在CSS 2.1中是未定义的
。
很无用，对不对？您是否考虑过使用 position：absolute 和 bottom：0 ？他们可能更多的是你要找的。
I have very strange "issue", on most browsers (ie, ff, chrome, safari). Here is example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html{
outline: 1px #0ff solid;
background: rgba(0,255,255,0.1);
}
body{
margin: 0;
padding: 0;
outline: 1px #00f solid;
background: rgba(0,0,255,0.1);
}
#aDiv{
width: 300px;
outline: 1px #f00 solid;
background: rgba(255,0,0,0.2);
}
#bDiv{
margin-top: 100%;
outline: 1px #0f0 solid;
background: rgba(0,255,0,0.1);
}
</style>
</head>
<body>
<div id="aDiv">
<div id="bDiv">
content
</div>
</div>
</body>
</html>
When You change #aDiv width, then #bDiv margin-top will change with same value. I dont know how it is possible, that height goes to width. Anyway maybe one of You could explain me whats going on?
Best regards ;)
D.
This is actually according to the spec
<percentage> The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
Pretty useless, right? Have you considered using position: absolute and bottom: 0? They might be more of what you're looking for.
这篇关于Margin-top：100％获取父宽度值...奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
