CSS：尽管缺少边距或填充，但 Div 元素过度滚动

Question

这是我之前的问题（Extending body to cover z-indexed footer when there isn't enough content - 现在使用 css3 高度计算以及提供的答案解决）的延续，其中#mainbody 元素滚动到它应该在的位置。 我设置了 365px 的下边距：

.mainbody{
    [...]
    margin-bottom: 365px;
}

因为这是它所覆盖的页脚的高度，但由于某种原因，尽管没有其他边距、填充或内容将其向上推，但由于某种原因它一直滚动得更高 - Chrome 在代码检查器中的计算框模型也正在确认这对我来说。我还删除了margin-bottom 代码行，同样的事情仍在发生。

您可以在这里查看代码和示例：http://stackoverflow.adamrapley.com/

谢谢:)

---

突出显示未执行应有操作的区域的附加代码：

html,body,#mainbodyholder{
    height: 100%;
}

#mainbodyholder{
position: relative;
position:0;
}


#mainbody{
transition: all 50ms;
padding: 0 10%;
height: 100%;
}

.mainbody{
position: relative;
top:0;
min-height: -webkit-calc(100% - 220px);
min-height: -moz-calc(100% - 220px);
min-height: -o-calc(100% - 220px);
min-height: calc(100% - 220px);
background: #E2E2E2 url('../img/ticks.png');
padding-bottom: 20px;
margin-bottom: 365px;
box-shadow: 0px 0px 30px 0px #000000; 
padding-top: 220px;
z-index: 2;
}

和 HTML：

<div id="mainbodyholder">
    <div class="mainbody container">
        <h1 class="title">Title</h1>
        <div id="mainbody">
            <p>Content</p>
        </div>  
    </div>
</div>

Answer 1

在向 div 声明一些浮点值后，即 或

你必须在关闭父div之前清除它。

<div style="clear:both;"></div>