CSS：比父母更大的子項（100％工作不正常）

我這種情況，我對父母使用CSS：比父母更大的子項（100％工作不正常）

height: 100%

中，並在父我有這個頭是34像素和一個100％的容器。出於某種原因，容器（有序列表）比父母

Here is a jsfiddle

更大，這裏是CSS

* { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    box-sizing: border-box; 
} 
section { 
    padding: 10px 20px 20px 10px; 
    border: 2px solid black; 
} 

header { 
    height: 30px; 
    background-color: blue; 
} 

ol { 
    list-style-type: none; 
    border: 1px dashed #d2d4d8; 
    box-sizing: border-box; 
    background-color: yellow; 
    padding: 0; 
} 

li { 
    display: inline-block; 
    box-sizing: border-box; 
    background-color: green; 
    width: 30%; 
    border: 1px solid blue; 
    font-size: 0; 
}

任何建議，爲什麼有序列表是父section元素之外？

來源

2014-04-13 Jeanluca Scaljeri

更改你的填充部分填充：10px 20px 40px 10px; （10px +你的標題高度） – Godinall

它將ol的高度設置爲父級高度的100％，而不是父級的100％減去標頭的30px。之前我對此感到沮喪，因爲在我的腦海中，我希望100％意味着「填充父母」，但意味着100％。如果你能做到CSS3的東西，你可以在你的CSS改成這樣：

ol { height: calc(100% - 30px); }

你也可以做一些定位的東西，但總是得到總值。這是一個未經測試的想法：

section { position: relative; } 
ol { position: absolute; top: 30px; bottom: 0; }

來源

2014-04-13 07:31:53

thnx爲答案。我可以使用鈣:)無論如何，由於這100％沒有做我期待它做的，我會檢查[flexbox]（http://www.w3.org/TR/css-flexbox-1/）太！ –

Flexbox真的是前進的方向，一旦你將頭圍繞在它身上，超級可愛。 –

它不會幫助您的填充百分比和固定大小。當你這樣做時，使用box-sizing:border-box;，以便基於百分比的寬度和高度將考慮填充和邊距，而不是僅在最後添加它們。

來源

2014-04-13 07:30:27 Styphon

CSS：比父母更大的子項（100％工作不正常）

回答

相關問題