CSS - 50％的利潤率是最高超過50％

我想通過百分比運算保證金孩子股利。 y位置應爲母公司的50％。但它不知何故更多。爲什麼不是50％？CSS - 50％的利潤率是最高超過50％

HTML

<div class="content"> 
    <header></header> 
</div>

CSS

.content { 
    width: 300px; 
    height: 200px; 
    background: blue; 
    position: relative; 
    clear: both; 
} 

.content header { 
    width: 100px; 
    height: 100px; 
    margin-top: 50%; 
    background: red; 
    position: relative; 
    float: left; 
}

來源

2013-12-14 user2952265

這是因爲，當涉及到頂部/百分比底部邊距和補，這些值將作爲分數寬度父元素的高度，而不是高度。根據W3C definition：

[邊]百分率的計算相對於所生成的框的包含塊的寬度。請注意， 'margin-top'和'margin-bottom'也是如此。如果包含塊的寬度取決於該元件上，然後將所得的佈局在CSS 2.1未定義。

此問題已在StackOverflow中解決 - see here。

建議：如果你想的元素在中心垂直的位置，你可以使用下面的技巧，而不是：

位置的子元素絕對
聲明尺寸爲母公司，使得母的尺寸不依賴這些孩子
位置的子元素的50％從頂部
使用CSS 2D轉換的一個漂亮的把戲。

下面是你的小提琴修改CSS的作品：

.content header { 
    width: 100px; 
    height: 100px; 
    top: 50%; 
    background: red; 
    position: absolute; 
    -webkit-transform: translate(0, -50%); 
    transform: translate(0, -50%); 
}

http://jsfiddle.net/teddyrised/73xkT/7/

來源

2013-12-14 16:43:25 Terry

什麼。 _爲什麼會有人認爲應該從橫向父寬度計算垂直邊距。我實在看不出一個用例永遠保證是一個好主意 – Bojangles

@Bojangles你得采取了W3C：P但是公設（見鏈接在我上面的回答SO回答）是，如果我們計算上/下邊距的高度，這會導致一個無限循環，因爲渲染引擎必須不斷調整，重新計算父高度。 – Terry

@Bojangles：https://stackoverflow.com/questions/7386353/why-does-the-page-width-affect-margin-top50-in-firefox/7386385#comment8924992_7386385（在另一個重複問題評論） – BoltClock

更改孩子的position相對於絕對的。
而不是margin-top使用top

http://jsfiddle.net/73xkT/5/

.content header { 
    top: 50%; 
    position: absolute; 
}

來源

2013-12-14 16:45:27 VenomVendor

CSS - 50％的利潤率是最高超過50％

回答

相關問題