css页脚不会保留在内容的末尾

Question

我有一个网站，我想在每个页面的末尾放一个页脚。

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

页脚

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

Answer 1

试试这个

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

Answer 2

将您的login div css更改为

.login{

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

页脚将在登录div后出现。

Check this jsfiddle

希望有所帮助