1

私が使用するときbottom:0;、十分なコンテンツがない場合、フッターはあるべき場所にありますが、ユーザーがページをスクロールする必要があるコンテンツがある場合、フッターは所定の位置に留まり、一度スクロールすると、フッターは真ん中にありますスクリーン。

使用bottom:0;していない画面いっぱいのコンテンツがある場合、フッターはあるべき場所にありますが、十分なコンテンツがない場合、フッターはあるべき場所ではなく、ページの真ん中のどこかにあります。 .

どちらも機能しますが、特定の条件が満たされた場合にのみ機能します。コンテンツの有無にかかわらず、常に下部に配置するにはどうすればよいですか?

.footer{
    background-color:#99C;
    background-repeat: repeat;
    width:100%;
    position:absolute;
    bottom:0;
}

html,body{ 
    padding:0;
    height:100%;
    width: 100%;
    margin:0;
}
4

1 に答える 1

4

ここで、このウェブサイトを試してみてください、それはそれを行う方法を説明しています。

また、例

HTML：

<html>
    <head></head>
    <body>
        <div id="container">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
    </body>
</html>

CSS：

html,body {
    margin:0;
    padding:0;
    height:100%;
}

div#container {
    position:relative;
    margin:0 auto;
    width:750px;
    height:auto !important;
    height:100%;
    min-height:100%;
}

div#header {
    height:150px;
    background-color:red;
}

div#content {
    padding-bottom:150px;
    height:800px;
    background-color:green;
}

div#footer {
    position:absolute;
    width:100%;
    bottom:0;
    height:150px;
    background-color:blue;
}

JSFiddle： http: //jsfiddle.net/gdy8K/

#headerと高さは、スペースを使用#contentするために単に存在することに注意してください。divただし、#footerスペースは必要であり、と一致する必要があり#content padding-bottomます。background-colorデモンストレーションのためだけにあります。

また、asp.netを使用している場合は、コンテンツが通常formタグ内にあることを忘れないでください。formこのように、最初のcssルールを追加する必要があります

html,body,form {
    margin:0;
    padding:0;
    height:100%;
}
于 2012-08-14T20:55:11.393 に答える