ページの一番下にフッターを配置したい。そこでmin-heigt:100%
、ajax コンテンツの読み込みをアニメーション化するための高さ設定なしの DIV とDIV を作成しました。
HTML:
<div class="main">
<div class="header navi>…</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
。しかし、ページを「手動で」リロードすると (コンテンツがアニメーション化されないように)、フッターが適切に配置されます。
したがって、コンテンツの高さに関係なく、コンテンツの下部にあるフッターが必要です。ページの上部にないため、アニメーターに最小高さを与えることはできません。