Question

我有这种情况，我使用

height: 100%

在父级上，在父级中我有这个标题是34px和一个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％意味着“填写父母”，但这意味着100％。如果你可以做css3的东西，你可以改变你的CSS：

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

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

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

Answer 2

您的填充百分比和固定尺寸与填充物无关。当你这样做时使用box-sizing:border-box;，以便基于百分比的宽度和高度将考虑填充和边距，而不只是在最后添加它们。

css：子项大于父项（100％未按预期工作）

2 个答案: