Question

我有一个内容很少的页面，所以我总是按下页脚以保持在底部。它工作正常。但问题是我有内容div的背景颜色。所以我自然而然地得到了我用过的填充的空白区域。

代码：

<div id="holder">
    <div class="full_width_header">Some content</div>
    <div id="featuredbg">
        <p>Body Content</p>
    </div>
    <div class="menubg"></div>
</div>

你可以看到我的意思

整页jsfiddle - http://jsfiddle.net/squidraj/K3Htx/2/embedded/result/

jsfiddle - http://jsfiddle.net/squidraj/K3Htx/2/

是否可以使用内容部分中使用的颜色覆盖该空白区域，但不能使用体型中的颜色。

Answer 1

如果您不想在body标签中添加背景颜色，则只需从featurebg div中删除填充并添加高度值即可。您还需要在主包装器（holder）中添加一个高度值，以便在css中保持高度：100％。

代码如下：

#holder {
    min-height: 100%;
    height: 100%;
    position: relative;
}

#featuredbg {
    background: #453A7E;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    height: calc(100% - 110px);
}

featuredbg中的高度值占用可用空间的100％，并减少页脚高度（menubg）。如果你只有100％的页脚会被忽略，并且featurebg会超过页脚。

强制页脚到页面底部

1 个答案: