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

将你的 login div css 更改为

.login{

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

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

Check this jsfiddle

希望对你有帮助