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，但是因爲我不知道你在做什麼我不能給你一個直接的答案，但我不知道是否有可能做到這一點，希望它有幫助。