jquery - 100% 高度分区问题

Question

我正在尝试制作一个包含我所有内容的完整页面 DIV，但当其他 div 大于屏幕大小时它会展开并且它不会自动展开您可以在 http://molly.everythingcreative.co.uk 查看网站(对不起，背景图片还没有调整大小，所以文件很大)。我目前正在使用 Stickyfooter 代码使 DIV 保持全屏显示，但它似乎会在调整 DIVS 大小或扩展 DIVS 时导致页面底部出现空白:

#global_main_frame {
    width: 350px;
    height: auto !important;
    min-height: 100%;
    top: 0;
    bottom: 0;
    position: relative;
    padding: 0 50px 0px 50px;
    float: left;
    left: -600px;
    background-color: rgba(0,0,0,0.8);
    z-index: 200;
}

例子

<div id="global_main_frame">
<!-- All the other DIV's -->
</div>

Answer 1

#global_main_frame 元素上的 clearfix 类导致了间隙。如果您将 clearfix 类上的 visibility 样式规则更改为 visible，您可以看到在全屏 div 下方插入的点以清除 float 。

要消除间隙，您可以将 font-size: 0 添加到 clearfix，或者从 中删除 clearfix 类#global_main_frame元素(容器为body元素时不需要)