css:子项大于父项(100%未按预期工作)

Question

我有这种情况,我正在使用

height: 100%

在父母身上,在父母身上我有这个34px的标题和一个100%的容器.由于某种原因,容器(有序列表)大于父级

这是一个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元素之外的任何建议？

Answer 1

您的填充百分比和固定尺寸无济于事。当您这样做时，请使用box-sizing:border-box;基于百分比的宽度和高度将考虑填充和边距，而不仅仅是将它们添加到末尾。

Answer 2

它将高度设置ol为父高度的100%,而不是父级的100%减去标题的30px.我之前对此感到沮丧,因为在我的脑海中,我希望100%意味着"填写父母",但这意味着100%.如果你可以做css3的东西,你可以改变你的CSS:

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

你也可以做一些定位的东西,但总是很糟糕.这是一个未经测试的想法:

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