2

cssstickyfooter.comに示されているように、CSS Sticky Footer メソッドを実装しようとしています。（ Ryan Faitのソリューションも試しましたが、役に立ちませんでした）。

私はすべてをフォローしました、または少なくとも私は持っていると思います. コンテナーdiv(ラップと呼ばれます)、ロゴ バー (ヘッダーと呼ばれます)、ページdiv(メインと呼ばれます)、そしてフッターがあります。

ここに問題があります。overflow:autoオンにすると、非常に短くdivスクロールバーが表示されます（厄介です）。しかし、コメントアウトすると、すべてのコンテンツが表示されますが、ページはコメントアウトされていないdiv場合と同じサイズであると認識しています。overflow:auto

それ以外の場合は、正常に機能します。フッターは下部にとどまり、サイズを変更すると、短いページ/メインで停止しますdiv。コンテンツの最後まで表示する方法はありますか? div含まれている のサイズに基づいてサイズを変更する必要があるため、ページ/メインに固定の高さを使用できないことに注意してくださいdiv(その時点で表示されているもの)。

フッターが問題の原因である場合とそうでない場合があります。

HTML:

<body>
<div id="container">
    <div id="logo"> 

        <div id="home-flower"></div><!-- end home-flower -->
        <div id="about-flower"></div><!-- end about-flower -->
        <div id="proof-flower"></div><!-- end proof-flower -->
        <div id="contact-flower" ></div><!-- end other-flower --> 
    </div><!-- end logo-->
    <div id="page">
        <div id="spacer"><br/></div><!-- end spacer -->
        <div id="home">home</div><!-- end home -->
        <div id="about">about</div><!-- end about -->
        <div id="proof">proof of concept</div><!-- end proof -->
        <div id="contact">contact</div><!-- end contact --> 
    </div><!-- end page -->
</div><!--end container-->
<div id="footer"> </div><!-- end footer -->
</body>

CSS:

* {
    margin:0px auto !important;
}

html, body {
    height:100%;    
}

#container {
    width:800px;
    background-color:#F0F;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

#page{
    width:100%;
    min-height:100%;
    position:relative;
    background-color:#F00;
    padding-bottom:75px;
    /*overflow:auto;*/
}

#logo{
    position:relative;
    width:100%;
    height:210px;
    top:0px;
    left:0px;
    background:url(images/logo.png);
}

#home{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    visibility:visible;
}

#about{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#proof{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#contact{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#footer {
    position:relative;
    margin-top:-75px;
    width:800px;
    height:75px;
    background-color:#C0F;
    clear:both;
}

#spacer {
    position:relative;
    line-height:20px;
}
4

2 に答える 2

0

#home、#about、#proof、および#contactdiv の位置を絶対ではなく相対に変更する必要があったようです。ただし、これを行うと、それらは互いに積み重ねられなくなります。相対的に配置された div を同じ (x,y) 位置にして、互いに重なるようにする方法についてのアイデアはありますか? 私は div ごとにtopと をleft設定し0pxていますが、積み重ねるのではなく、自分自身を重ねるだけです...それが理にかなっている場合。

于 2011-08-03T00:53:52.177 に答える
0

使ってみてはどうですか

<div id="footer">
  This is footer text
</div><!-- end footer -->

そしてcss

#footer{ position:fixed; bottom:0px; }

フッターはページの下部に固定されます。

これはあなたが探しているものです。

于 2011-08-02T11:23:54.393 に答える