0

私は何も変更せずにブートストラップを使用しています。レイアウトはとてもシンプルです。私はトップナビゲーションバーを持っています。続いてメインコンテナ。最後に、フッターがあります。何かのようなもの：

<head>
 <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
    background-color: #ECECEC;
      }
 </style>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    // navbar elements
    </div> <!-- end of class navbar -->

    <div class="container">
    // fluid-row class with two column structure
    </div> <!-- end of class container -->

    <div class="footer">
        <div class="container"> <!-- using container to left-align footer to the main content -->
        // some content
     </div> <!-- end of class footer -->
</body>

できないことが2つあります。

1) メイン コンテナ クラスのコンテンツが少ない場合は常に、フッターを画面の下部に配置する必要があります。min-height:100% を試しましたが、何か間違っています。

2) フッターの背景色を変更する必要があり、メイン コンテナーが終了したら、フッターが画面の残りの部分を占める必要があります。フッターには最小の高さを設定するか、フッター内のコンテンツに従って高さを設定できます。

.footer {
height:80px;
margin-top:-80px;
position:relative;
clear:both;
padding-top:20px;
background-color:#F4F4F4;
border-top:1px solid #ddd;
clear:both;
}

何が起きてる？

JSfiddle: http://jsfiddle.net/m7dkt/13/

4

3 に答える 3

1

これはあなたのためのトリックをするはずです：http：//jsfiddle.net/panchroma/ru2BD/

フッターに色を付けてページの下部まで拡張する方法を理解する代わりに、フッターの色に必要なボディカラーを設定してから、ヘッダーとフッターの間のコンテンツ領域に色を付けます。 

body {
background-color: #F4F4F4; /*same as footer color */
}

/* don't need to explicitly set footer colour now, it's set above */  

/* .footer {
background-color:#F4F4F4;   
}   */  

/* wrap page content and set the background colour */  

#wrapper{       
padding-top:10px;
background-color:#ECECEC;
}

アップデート

私があなたを正しく理解しているなら、あなたはフッターテキストもウィンドウの下部に揃えたいと思うでしょう。これがどのように見えるかを見てください：http：
//jsfiddle.net/panchroma/D7YXP/

これは、上記のテクニックとスティッキーフッターを組み合わせたものです。

于 2013-01-10T14:38:23.970 に答える
0

css に以下の css を追加してみてください。

html, body, #wrapper{
    height:100%;
}
于 2013-01-10T06:28:56.213 に答える
0

私はこのトリックを使用しました：それがあなたに役立つことを願っています.

HTML

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

CSS

#clearfooter {
    display: block;
    height: 50px;
}

#wrap{
    padding-bottom:69px;
    overflow:hidden;
}

#footer{
    width:100%;
    height:69px;
    background:#8dc63f;
    overflow:hidden;
    clear:both;
    color:#FFF;
    position:fixed;
    bottom:0;
    opacity:0.9;
}
于 2013-01-10T06:17:07.773 に答える