-2

ヘッダー、ボディ、フッターが必要です。コーディングしました。コードを変更すると、このように指定するとフッターがボディの下に配置されます

HTML コード:

<div id="body" style="background-image:url(img/bg.png);" class="body">
<div id="title" class="title">
         <h1><strong></strong></h1>
    </div>

    <div id="desc" class="desc">
    <p style="desc p"></p>
    </div>
 </div> 

<div id="footer" style="background-image:url(img/bottom_bar.png);" class="footer">
<div><h6 class="footer h6">2011-FOOOTER</h6><a href=""><img src="img/info.png" alt="" /></a></div>
</div>

CSS コード:

.body
 {
float:left; float:left; width:100%; height:100%; min-height: 100%; overflow-y: scroll;
 }

.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}

.desc
{
  width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px;
}

.desc p
{
margin-top:0; 
}

フッターの CSS コード:

 .footer
    {
         float:left; width:100%; line-font-size:15px; padding:0px; bottom:0px; height:25px;  font-size:18px;
    }

以下のようにコーディングすると、フッターが本文の上に置かれ、下に行くとフッターの下にテキストが表示されます

.footer
{
     float:left; width:100%; position:absolute; line-font-size:15px; padding:0px; bottom:0px; height:25px;  font-size:18px;
}

フッターを画面下部に固定し、スクロールバーなしでテキストをスクロールしたい。

誰かが私がした間違いとは何か、どこで提案できますか?

4

3 に答える 3

2

確かに、フッターが本体の 100% の高さで本体の下に押し込まれ、フッターがビューに留まるスペースがありません。解決する必要があります。とにかく、この質問は非常に一般的です。あなたの言葉は役に立たなかったかもしれません。単にあなたがする必要があります「Sticky Footer」について検索して、ここで多くの質問に答えたり、単に Google の魔法で答えたりできます: http://ryanfait.com/sticky-footer/ とhttp://www.cssstickyfooter.com/

そして、それについて学びましょう。幸運を。

于 2013-05-22T08:33:25.900 に答える
2

スクロールバーを表示するには、overflow:hidden in body を削除するだけのこのスタイルを試してください

html,
body {
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
}
#wrapper {
    min-height:100%;
    position:relative;

}
#header {
    background:#ededed;
    padding:10px;
}
#content {
    padding-bottom:100px; /* Height of the footer element */

}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:fixed;
    bottom:0;
    left:0;
}
于 2013-05-22T10:27:32.747 に答える
1

フッタークラスで

それ以外の

position:absolute;

使用する

position:fixed;

これはうまくいくはずです

于 2013-05-22T10:23:44.883 に答える