无法将页脚推到底部

Question

I am trying to push my footer page on the bottom but in my layout it is on the top part. 我试图将页脚页面推到底部，但在我的布局中，它放在顶部。

Here's my code. 这是我的代码。

sample structure 样本结构

<body>
<!-- some codes here -->
<footer>
    <div id="main-footer">
        <div class="col-md-8 col-md-offset-2">
            <h1>hello world</h1>
        </div>
    </div>
</footer>
</body>

css 的CSS

body {
    font-family: Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
    font-weight: 300;
    position: relative;

    footer {
        position: absolute;
        bottom: 0; /** no effect **/
        min-height: 500px;
        background: #000;
        width: 100%;
        z-index: 4;
        /** top: 0; -- if enabled my footer goes on the top **/
    }

}

--- updated css --- -更新了CSS-

html { height: 100%; }
body {
    font-family: Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
    font-weight: 300;
    min-height: 100%;
}

footer {
    height: 100px;
    background: red;
    z-index: 5;
    position: absolute;
    width: 100%;
    min-height: 100px;
    bottom: 0;
}

I try to check if the whole body will occupy if I set the height to 100% but here's the output: 如果将高度设置为100％，我会尝试检查整个身体是否会被占用，但这是输出：

As you can see it doesn't occupy my entire page. 如您所见，它并没有占据我的整个页面。

Answer 1

Please use below css for your code, may be it will work for you. 请使用下面的CSS作为您的代码，可能对您有用。

html {
    min-height:100%;
    position:relative;
    height:auto;
}

body {
    padding-bottom:500px;
}

footer {
    position: absolute;
    bottom: 0; /** no effect **/
    min-height:500px;
    background: #000;
    width: 100%;
    z-index: 4;
}

Answer 2

Close your css body braces properly. 正确关闭CSS身体支架。 Also refer other website and learn how to write/code CSS. 另请参阅其他网站，并学习如何编写/编码CSS。 For now, consider the following. 现在，请考虑以下内容。

Do not use absolute. 不要使用绝对值。 Instead, use relative position. 而是使用相对位置。 Relative position used to place a content relative to its normal position. 用于放置内容相对于其正常位置的相对位置。 Absolute position used to place a content to the nearest positioned ancestor. 用于将内容放置到最接近的祖先的绝对位置。 There are three types of positions: fixed, relative, absolute and static. 职位分为三种：固定，相对，绝对和静态。

body {
    font-family: Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
    font-weight: 300;
    position: relative;
}
footer {
    position: relative;
    bottom: 0; /** no effect **/
    min-height: 500px;
    background: #000;
    width: 100%;
    z-index: 4;
    /** top: 0; -- if enabled my footer goes on the top **/
}

无法将页脚推到底部

问题描述

2 个解决方案

解决方案1
1 2017-05-04 06:15:00

解决方案2
1 2017-05-04 06:18:19

无法将页脚推到底部

问题描述

2 个解决方案

解决方案1 1 2017-05-04 06:15:00

解决方案2 1 2017-05-04 06:18:19

解决方案1
1 2017-05-04 06:15:00

解决方案2
1 2017-05-04 06:18:19