Question

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

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

因为这是它所覆盖的页脚的高度，但由于某种原因它尽管没有其他边缘，填充或内容推动它仍然保持滚动更高 - 代码检查员中的Chrome计算箱模型也确认这对我来说。我还删除了代码边距底线，同样的事情仍在发生。

您可以在此处查看代码和示例：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>

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

1 个答案: