CODEWITHSUNDEEP
htmlcss
Jerielle
Jerielle

Reputation: 7520

Unable to push footer at the bottom

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

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 ---

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:

enter image description here

As you can see it doesn't occupy my entire page.

Upvotes: 0

Views: 78

Answers (2)

Dhaval J. Patel
Dhaval J. Patel

Reputation: 25

Close your css body braces properly. Also refer other website and learn how to write/code 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 **/
}

Upvotes: 1

Sunil Singh Rawat
Sunil Singh Rawat

Reputation: 96

Please use below css for your code, may be it will work for you.

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;
}

Upvotes: 1

Related Questions