CSS：多色頁腳背景問題

我無法正確設置頁腳。我有一個底部導航欄作爲我的頁腳的一部分工作正常（顏色：＃7A7A7A）。問題在於隨後的版權信息。它有一個地址和電話號碼。我希望頁腳的這一邊有黑色的背景（＃000）。這部分標籤在css下copyRight，我沒有得到任何結果。任何想法可能是錯誤的？CSS：多色頁腳背景問題

這是我的Live EXAMPLE。感謝

你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>

來源

2012-06-28 CodingWonders90

你可以顯示你的HTML？ –

你浮#copyRight的內容，所以它需要以遏制它們適當地浮動。這種加入#copyRight：

float: left; 
width: 100%;

Read Brilliand detailed explanation below

來源

2012-06-28 07:53:01

有很多方法可以控制花車;我喜歡'overflow：hidden'，我自己。 – Brilliand

@Telemako這是完美的，謝謝。 – CodingWonders90

兩者（Telemanko和Ahsan）的組合工作http://jsfiddle.net/Az2JA/1/ –

在#copyRight

添加overflow:hidden所以你的CSS應該是這樣的：

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

來源

2012-06-28 07:56:32

您遇到的問題是，大多數元素，包括divs，不要默認擴展爲包含浮動元素。由於copyRight內的所有內容都是浮動的，因此它的行爲就像是空的一樣，並縮小爲無。

有很多方法可以將元素展開爲包含浮動元素。我個人最喜歡的是設置overflow幾乎任何東西 - hidden是最常見的。

#copyRight{ 
    overflow: hidden; 
}

另一種方法是讓包含的元素也浮動，雖然它可能會導致與試圖包含它的元素相同的問題。另外，浮動的原因shrinkwrapping，所以必須設置一個明確的寬度：

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

類似的結果可以使用各種display聲明來實現，如display: inline-block。這避免了傳播的問題父元素：

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

顯然，早在2004年它被認爲是一個美妙的新的想法通過inserting a clearing element with the :after pseudo-class而不是添加<div style="clear:both;"></div>的老方法來解決這樣的問題。這些技巧也可以解決你的問題，雖然清理浮動幷包含它們並不完全相同。

來源

2012-06-28 08:22:54 Brilliand

'overflow：auto'可能會比'overflow：hidden'更好，這取決於滾動條是否會在病態邊緣情況下良好的回退（用戶樣式表將字體設置爲52pt？）。雖然這個差別非常小。 – Brilliand

我使用我接受的解決方案鏈接到此答覆。感謝您的詳細解釋。 –

CSS：多色頁腳背景問題

回答

相關問題