0

フッターを適切に設定するのに苦労しています。フッターの一部として、正常に動作している下部ナビゲーション バーがあります (色:#7A7A7A)。問題は、それに続く著作権情報にあります。住所と電話番号があります。フッターのこちら側に黒の背景 (#000) を付けたいと思っています。この部分は、結果が得られないcopyRightの下のcssでラベル付けされています。何が間違っている可能性がありますか？

これが私のライブの例です。ありがとうございました

CSS

html, body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:#333333;
    font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
    font-size:small;
    color:#5e5e5e;
    line-height: 130%;
}


/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper in the background. ******/

#colorblock {
    position: absolute;
    top: 60px;
    left: 0px;
    background: #c69a55;
    z-index: 0;
    height: 65px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

/**************************************************/



div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:925px;
    background:#f0f0f0;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    border-right: 15px solid #000000;
    border-left: 15px solid #000000;

}

div#contentArea {
    padding:1em 1em 5em; /* bottom padding for footer */

}
    div#contentArea p {
        text-align:justify;
        padding:0 1em;
    }

#content {
    margin-left: 240px;
    margin-right: 0 auto;
    background: #ebebeb;
    padding: 5px;
    width:635px;
    height: 400px;

}

/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/
div#header {
    /*padding:1em;*/
    height: 175px;
    border-top:15px solid #000000;

}
    div#header p {
        margin:0;
    }



/****** LEFT COLUMN: This is the left gray column next to the content. Features the styling for the log-in form and the location links. ******/

#left2 {
    float: left;
    width: 200px;
    background: #dddddd;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-right: 15px;
    padding: 5px;
    height: 400px;
}


/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/


div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#7A7A7A;
    border-bottom:15px solid #000000;
}
    div#footer p {
        padding:1em;
        margin:0;
    }

a.footer {
    color: #c7c7c7;
    font-size: 80%;
    padding-right: 20px;
    letter-spacing: 1px;
}   


p { 
    margin:0 0 1em;
}   

#copyRight{
 background:#000;   
 color: #FFF;
 font-size: 75%;
 bottom: 0;


}

.left{float:left;}
.right{float:right;}



</style>
4

3 に答える 3

1

あなたが抱えている問題は、divを含むほとんどの要素が、デフォルトではフローティング要素を含むように展開されないことです。中のすべてcopyRightが浮いているので、それは空であるかのように振る舞い、何にも縮みません。

フローティング要素を含むように要素を拡張する方法はたくさんあります。私の個人的なお気に入りは、overflowほぼすべてのものに設定することです-hidden最も一般的です。

#copyRight{
    overflow: hidden;
}

もう1つの方法は、包含要素もフロートさせることですが、それを包含しようとする要素で同じ問題が発生する可能性があります。また、フローティングはシュリンクラップを引き起こすため、明示的な幅を設定する必要があります。

#copyRight{
    float: left;
    width: 100%;
}

display同様の結果は、などのさまざまな宣言を使用して実現できますdisplay: inline-block。これにより、問題が親要素に伝播するのを回避できます。

#copyRight{
    display: inline-block;
    width: 100%;
}

どうやら2004年に、古いメソッドを追加する代わりに、疑似クラスでクリアリング要素を挿入する:afterことによってこのような問題を解決することは素晴らしい新しいアイデアと考えられていました<div style="clear:both;"></div>。これらのトリックも問題を解決しますが、フロートをクリアして封じ込めることはまったく同じではありません。

于 2012-06-28T08:22:54.200 に答える
1

#copyRight のコンテンツをフローティングしているため、適切に含めるためにフローティングする必要があります。これを #copyRight に追加します。

float: left;
width: 100%;

以下のBrilliandの詳細な説明を読んでください

于 2012-06-28T07:53:01.177 に答える
1

アドインoverflow:hidden_ #copyRight

したがって、CSS は次のようになります。

#copyRight{
    background:#000;   
    color: #FFF;
    font-size: 75%;
    bottom: 0;
    overflow:hidden
}
于 2012-06-28T07:56:32.820 に答える