0

ページの一番下にフッターを配置したい。そこでmin-heigt:100%、ajax コンテンツの読み込みをアニメーション化するための高さ設定なしの DIV とDIV を作成しました。

HTML:

<div class="main">
    <div class="header navi>…&lt;/div>
    <div class="animater">
        <!-- content goes here -->
        <div class="footer">
            <!-- footer stuff goes here -->
        </div>
    </div>
</div>

CSS:

.main {
    min-height:100%;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
.header {
    // height, width, margin, position
}
.animater {
    // empty
}
.footer {
    bottom:0px;
    position:absolute;
}

ページを読み込んで、コンテンツが画面よりもはるかに小さい場合、すべてが完璧に機能します。フッターは想定どおり画面の下部にあります。

animater現在、 CSS キーフレームを使用してアニメーション化しています。アウトアニメーションが終了したら、コンテンツを置き換えてanimater、再びアニメーション化します。コンテンツが画面よりも小さい場合、フッターは my の上部にありますanimater。しかし、ページを「手動で」リロードすると (コンテンツがアニメーション化されないように)、フッターが適切に配置されます。

したがって、コンテンツの高さに関係なく、コンテンツの下部にあるフッターが必要です。ページの上部にないため、アニメーターに最小高さを与えることはできません。

4

1 に答える 1

4

私が作成したこの例は、フッターを停止させるために必要な最小限の css を示しています。http://jsfiddle.net/meBv3/

HTML

<div class="wrapper">
<div class="page">
    page here
</div>
<div class="footer">
    Content for  class "footer" Goes Here
</div>
</div>

CSS

/* THIS IS THE MIN STYLE NEEDED TO GET THE FOOTER TO STAY DOWN */

html, body{
height:100%;    /* to keep .footer on bottom */
margin:0;   /* to get rid of scroll bar, because (100% + default margin = scroll) */

}
.wrapper {
min-height: 100%;   /* to keep .footer on bottom */
position: relative; /* must be relative or .footer will cover content */
}
.page {
padding-bottom:2.2em;   /* MUST have padding on the bottom => .footer, or .footer will cover content 8*/

}
.footer {
position: absolute; /* to keep .footer on bottom */
bottom: 0px;    /* to keep .footer on bottom */
height:2em; /* height must be smaller then .page's bottom padding */

}
于 2013-01-21T15:34:02.423 に答える