html - css footer doesn't remain at the end of the content

Question

I have a website and I want to put a footer at the end of each page.

The page login has content, but the footer doesn't remain at the end of it.

login

<div class="login">
    <form id="loginForm" method="POST" action="<?php echo URL; ?>Login/run">
        <li>
            <label>
                Username:
            </label>
            <input type="text" name="username"/>
            <span class="errorMessage"></span>
        </li>
        <li>
            <label>
                Password:
            </label>
            <input type="text" name="password"/>
            <span class="errorMessage"></span>
        </li>
        <li>
            <label>
                Type:
            </label>
            <select name="typeOfUser">
                <option  value="1">Restaurant</option>
                <option value="2">Customer</option>
            </select>
        </li>
        <li>
            <label></label>
            <input type="submit" value="Login"/>
        </li>
    </form>
</div>

css

.login{
    position: relative;top: 100px;
    margin-left: 280px;
}
.login li{
    list-style: none;
    padding-bottom: 10px;
}
.login label{
    color: blue;
    display: inline-block;
    width: 100px;
}
.login input{
    padding: 0.4em;
}
.login select{
    padding: 0.4em;
}

footer

#footerContent{
    position: relative;
    bottom: 0px;
    width: 100%;
    height: 48px;
    background-color: #646467;
}

Answer 1

将你的login divCSS 更改为

.login{

position: relative;
margin-top: 100px;
margin-left: 280px;
}

和页脚将在登录 div 之后出现。

检查这个jsfiddle

希望能帮助到你

Answer 2

尝试这个

#footerContent{
position: absolute;
bottom: 0;
width: 100%;
height: 48px;
background-color: #646467;
}