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

Question

我正在使用这种情况

height: 100%

在父级上，在父级中我有这个 34px 的 header 和一个 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 元素之外有什么建议吗？

Answer 1

它将 ol 的高度设置为父级高度的 100%，而不是父级的 100% 减去标题的 30px。我以前对此感到沮丧，因为在我的脑海中，我希望 100% 的意思是“填充给 parent ”，但它实际上意味着 100%。如果你能做 css3 的东西，你可以把你的 css 改成这样:

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

你也可以做一些定位的事情，但这总是很恶心。这是一个未经测试的想法:

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