Div - 保证金作为百分比内的百分比

Question

这不像预期的那样工作。我基本上喜欢红色div被定位在div的顶部20％。这不起作用。我已经提供了JS小提琴和下面的代码。

HTML

<div id="container"> 


    <div id="inside"</div> 

</div> 

CSS

body, html { 
    margin: 0 0; 
    height: 100%; 
} 

#container { 
    background: yellow; 
    height: 60%; 
    width: 100%; 
} 

#inside { 
    background: red; 
    height: 50%; 
    margin-top: 20%; 
    width: 100%; 
} 

的jsfiddle - 实时预览 http://jsfiddle.net/ye947tjh/

Answer 1

如果您为保证金百分比 - 值，其计算来自元素的宽度。

看看这里的更多信息： Why are margin/padding percentages in CSS always calculated against width?

Answer 2

边缘由上延伸到容器中，可以使用overflow: hidden包含它：

body, html { 
    margin: 0; 
    height: 100%; 
    width: 100%; 
} 

#container { 
    background: yellow; 
    height: 60%; 
    width: 100%; 
    overflow: hidden; //add 
} 

#inside { 
    background: red; 
    height: 50%; 
    margin-top: 20%; 
    width: 100%; 
} 

FIDDLE

Answer 3

问题是因为Margin collapsing

所以你可以设置容器div到display:inline-block或添加在容器中的一些内容div

与inline-block

演示 - http://jsfiddle.net/ye947tjh/2/

与content

演示 - http://jsfiddle.net/ye947tjh/3/

Answer 4

那么你能做到这一点，或者你可以只使用不管是px还是cm，因为我更喜欢让它几乎变成desamme，但是因为我不知道你在做什么我不能给你一个直接的答案，但我不知道是否有可能做到这一点，希望它有帮助。