3

これは私が現在取り組んでいるページです: http://jsfiddle.net/0xsven/hycRx/

フッターが常に最下部に表示されるように、ページを垂直方向に拡張して画面全体に表示したい。粘着性のあるフッターを探しているわけではありません! この写真のように、ページを一番下まで拡大したいです。

これが可能かどうか、何か考えはありますか?

アップデート

紛らわしい言葉を使用したので、質問を明確にしようとしています。

十分なコンテンツがない場合でも、ページが常にビューポートを垂直方向に埋めるようにします。ビューポートを拡張するのに十分なコンテンツがあるとすぐに、ページはスクロール可能になります。私のテストでは、粘着性のあるフッターが常にビューポートの下部に残り、他の要素を覆っていますが、これは望ましくありません。

私が思いついた解決策の1つは、jqueryでパディング/マージンを操作/サイズ変更して、ビューポートに収まるようにすることです。しかし、私はそのようなことにjavascriptを使用するのは嫌いです。

4

3 に答える 3

0

次のように、position属性を試すことができます。 

#footer{
    background-color: #222;
    position: relative;
    bottom: 0;
}
于 2012-09-10T11:20:37.100 に答える
0 
#footer{
    position: fixed;
    bottom: 0;
}
于 2012-09-10T11:40:42.410 に答える
0

エミュレートしようとしている動作は、従来の CSS スティッキー フッターの動作です。

簡単な例を次に示します。

HTML

<div id="wrap">
    <div id="main">
    </div>
</div>

<div id="footer">
</div>

CSS

html, body {height: 100%;}
#wrap {min-height: 100%; *display:table; *height:100%}
#main {overflow:auto; padding-bottom: 150px;}  /* must be same height as the footer */
#footer {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}
于 2012-09-11T08:24:17.170 に答える