0

問題のサイトは 1000freewebsites.com です。私が苦労している特定のページは次のとおりです。

  • 1000freewebsites.com/signup.php
  • 1000freewebsites.com/login.php

このサイトでは、スケルトン フレームワークと Ryan Fait のスティッキー フッターを使用しています。これらのページには、#bluestripe の ID を持つ div があり、ヘッダーとフッターの間の垂直方向のスペースを埋める必要があります。

3 つの親要素があります。#html、#body、および .wrapper。すべてが height:100% に設定されています。スタイルシートで。#bluestripe も height:100% と min-height:100% に設定されています。私が理解しているように、これは私が望む効果を達成するはずです。私の理論は間違っていますか？

Chrome Inspector を使用すると、.wrapper の高さ属性が消されていることがわかりました。私の理論が正しければ、#bluestripe が垂直方向のスペースを埋めるために拡大しない理由はこれで説明できます。

.wrapper の高さ設定をオーバーライドする要素が見つかりません。私が欠けているものを見ることができますか？

4

2 に答える 2

0

これはあなたのCSSです：

.wrapper {
min-height: 100%;
height: auto !important; //height here
margin: 0 auto -40px;
height: 100% ;//height again here
}

あなたは2倍の高さを定義しており、最初の高さが!important2番目の高さをオーバーライドしたためです

パディングと他の要素が div を押し下げているため、これにより別のエラーが発生します。その.containerため、いくつかのプロパティを変更すると、この動作を取り除くことができます。

#bluestripe {
background: #0099cc;
width: 100%;
padding: 40px 0px 40px 0px;
border-top: 10px solid #666666;
/*height: 100%; drop this line*/
}

.wrapper {
background: #0099cc; /*add this line*/
min-height: 100%;
margin: 0 auto -40px;
height: auto; /*acording to ryanfaits's css this is what mades the footer stick to the botom*/
}

これにより.bluestripe再び縮小されますが、.wrapper の背景色は同じなので問題ありません。

于 2013-05-20T03:53:34.703 に答える
0

の CSS ルールに.wrapperは 2 つの高さの宣言があります。1 つの設定の高さを自動に取り除きます。

.wrapper {
    min-height: 100%;
    height: auto !important; /* <- Get rid of this one */
    margin: 0 auto -40px;
    height: 100%;
}
于 2013-05-20T03:54:39.940 に答える