Question

我试图在一个部分中显示一个列表。我将宽度/高度设置为100％并与box-sizing: border-box结合使用，但由于我不明白，事情仍然很广泛。有问题的html看起来像这样：

<main>
    <section scrumboard="" class="scrumboard">
        <ol class="lanes">
            <li class="lane droppable">
                <h1 class="lane-title">todo</h1>
            </li>
            ....

        </ol>
    </section>
</main>

CSS：

html,body,main,section {
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

body {
    padding: 20px;
}

 .scrumboard {
     background-color: #aaa;
 }

 .lanes {
     box-sizing: border-box;
     display: flex;
     flex-wrap: nowrap;
     font-size: 0;
     height: 100%;
     list-style-type: none;
     margin: 50px 0 0;
     padding: 0px;
 }

 .lane {
     height: 100%;
     border: 1px dashed black;
     margin: 0 5px 10px 5px;
     box-sizing: border-box;
     display: inline-block;
     text-align: center;
     flex: 1 100%;
 }

 .lane-title {
     font: 100 20px/40px 'Titillium Web';
     margin-top: -35px;
     color: #253248;
     text-transform: uppercase;
 }

这是jsfiddle 所以，我不明白为什么body元素上的填充在右侧下降，为什么li元素会变长（底部的边框不可见。任何建议我在这里失踪了什么？

Answer 1

首先，我应该注意，网络浏览器通常在margin元素上应用<body>。由于保证金不包含在计算框的width / height中，因此您必须将其删除：

body { margin: 0; }

因此第一个问题 would be fixed 。

其次，由于<li>元素（他们的容器）顶部的50px边距，全高.lanes项被推下。

您可以使用CSS3 calc()函数为li.lane个.lane { height: calc(100% - 50px); }元素修复此问题，如下所示：

calc()

<强> height

由于您使用flexbox进行布局，因此在浏览器支持方面使用{{1}}似乎很好。

css：使用box-sizing时元素仍然很宽

1 个答案: