0

メインマークアップ

<body>
  <div id="contenedor">
      ....
  </div>
  <div class="fLeft"> <footer > ... </footer> </div>
</body>

CSS

body{
}
#contenedor{ float: left; width:100%;}
.fLeft{ float:left }

最善の方法は、ページをファイアバグすることだと思います。

http://209.51.221.243/integracion/login.php

ご覧のとおり、フッターはコンテンツの背後にあるページの中央より上にあります...

4

3 に答える 3

0

最初は、フロートをクリアしなかったのではないかと思いました。しかし、その後、各フロート要素が絶対的に配置されていることに気付きました。要素に適用position:absoluteすることで、ドキュメントのフローから要素をリッピングします。これを修正する最善の方法はposition:absolute、「ウィジェット」から削除することですが、そうすると、現在のデザインが表示されなくなります。

制限を回避するためのアイデア/提案は、フッターをページの下部に固定することです。以下を適用します<footer>：

footer {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
}

ページをスクロールしてもフッターが配置されたままになり、理想的とは言えない可能性がありますが、ページの下部に表示されたままになることを保証できます。それ以外の場合は、一部のプロパティの誤用のためにスタイルを作り直すことを検討しています。

于 2012-08-29T14:28:00.560 に答える
0

フッターの前にフローティングdivを使用するため、フッターをそれらのdivの後に配置するには、フッターのcssに次の値が含まれている必要がありclear: both;ますclear: left;。

ドキュメント：http ：//www.w3schools.com/cssref/pr_class_clear.aspおよび（もちろん）https：//www.google.com/search？q = css + clear :)

于 2012-09-06T12:30:11.007 に答える
-1

UPDATE2：自分が間違っていることに気づきました。この特定のケースでは、この回答は機能しません。

まず、これはどのフッターにとってもかなり良い出発点です。これを使って。

.centerCnt2番目：すべてのフローティングボックス（ ）を含むコンテナは、それらすべてを収めるのに十分な大きさではないことに気付いたかもしれません。これを修正するには、良いを使用する必要があります.clearfix。選択できるものはたくさんありますが、私はこれを使用します。

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. - j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

これが必要になります.centerCnt。そうしないと、スティッキーフッターが機能しません。

更新：clearfixを使用するだけで、おそらく問題が修正されます。上記のコードをCSSに追加し.centerCnt、クラスを指定しclearfixます。

于 2012-08-29T14:37:11.833 に答える