0

私はウェブサイトを持っていて、各ページの最後にフッターを付けたいと思っています。

ページ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;
}

レンダリングされたHTMLページ

フッター

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

2 に答える 2

1

これを試して

#footerContent{
position: absolute;
bottom: 0;
width: 100%;
height: 48px;
background-color: #646467;
}
于 2013-03-16T13:27:29.710 に答える
1

login divcssをに変更します

.login{

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

とフッターはログインdivの後に来ます。

このjsfiddleを確認してください

それが役に立てば幸い

于 2013-03-16T13:32:15.560 に答える