StickyFooter の逆の状況を実行しようとしています: フッターは常に表示されている必要があります (コンテンツに重なる) が、ブラウザーの高さがコンテンツを超えた場合はページのコンテンツに固執する必要があります (コンテンツは固定の高さになります)。
基本的には、ブラウザーの高さがコンテンツよりも小さい場合にのみ、position:fixed のように動作するようにしたいと考えています。
スティッキーフッターと同じように(最小高さの代わりに最大高さを使用して)CSSだけで試してみましたが...
私の問題: ブラウザーがコンテンツよりも小さい場合、最初はフッターが一番下にくっつきますが、スクロールしても下にくっつきません。ここに示すように
一番下にくっつくようにするためにJavaScriptが関係していると思いますが、これを行うスクリプトは見つかりませんでした(そして、自分でスクリプトを書く方法がわかりません...)
ヘルプ、提案、リンクをいただければ幸いです。ありがとう。
HTML, BODY { height: 100%;
font-family: helvetica, arial;
font-size: 8pt;
}
#wrapper {
margin: 0 auto;
width: 800px;
position:relative;
height:100%;
max-height: 516px;
}
#content {
width:800px;
height:400px;
position: absolute;
background: #999;
border: 4px solid #000;
}
#footer {
height: 100px;
position: absolute;
bottom: 0;
width: 800px;
background-color: yellow;
border: 4px solid #f90;
}