CSS頁腳寬度

Question

我一直在使用CSS只有幾個星期了。我正在使用Drupal重新創建一個網站。我遇到了頁腳的問題，它不會延伸到適合屏幕（就像在stackoverflow上）。我希望能夠縮小，並將擴展到整個網站。

我一直在尋找網絡現在約兩天試圖找出這一點，在這一點上，我沒有更多的想法嘗試。

我的站點當前位於DEV服務器上，因此我可以訪問所有文件。我認爲我需要編輯的文件是layout.css，但如果它在另一個文件中，請讓我知道。

/* 
* site-specific layout statements 
*/ 
/* Structure 
-------------------------------------------------------------- */ 

body,html{ 
    margin:0px; 
    padding:0px; 
    background: #17293d url(../img/backgrounds/main_bg.gif); 
} 

#totalContainer{ 
    //margin-top:10px; 
    //margin-bottom:10px; 
} 

.width_1#totalContainer{ 
    width:1038px; 
} 

.width_2#totalContainer{ 
    width:978px; 
} 

#topBar{ 
    margin:0px; 
    padding:0px; 
    float:left; 
    width:100%; 
} 

#topBarContainer{ 
    margin:15px auto 15px auto; 
} 

.width_1#topBarContainer{ 
    width:1038px; 
} 

.width_2#topBarContainer{ 
    width:978px; 
} 

#topBarLink{ /* top toggle bar */ 
    text-align:center; 
    margin:0px; 
    padding:0px; 
    height:10px; 
    width:100%; 
} 

#topBarLink a{ /* top toggle bar */ 
    float:left; 
    margin-left:48.5%; /* make it block level and try to center it without javascript..*/ 
    padding:15px 10px 5px 10px; 
} 

#topBarLink.withoutTopRegion a{ /* makes space in case we don't have any element in the top Region */ 
    margin-bottom:50px; 
} 

#top{ /* upper part of the template */ 
    float:left; 
    width:101.2%; 
    height: 84px; 
    position:relative; 
    /* margin-bottom:10px; */ 
    /* background: #black; */ 
} 

#topUtility{ 
    position:absolute; 
    top:13px; 
    right:18px; 
} 

#logo-container{ /* image logo container */ 
    float:left; 
    height:150px; 
    margin-right:10px; 
    margin-top: 0px; 
} 

#title-slogan{ /* site title and slogan container */ 
    float:left; 
    margin-top:20px; 
} 

#site-title, 
#site-slogan{ 
    margin:0px; 
    padding:0px; 
} 

#search{ /* theme search box */ 
    position: absolute; 
    right:0px; 
    top: 30px; 
} 

#search div{ /* search button inline */ 
    display: inline; 
} 

//#pageBorder{ /* makes the border */ 
    //float: left; 
//} 

.ie7 #pageBorder{ /* for IE7 */ 
    float: none; 
    overflow: hidden; 
} 

/*#contentWrapper{ /* wraps content */ 
/* float: left; 
    padding:15px 5px 15px 5px; 
    position: relative; 
    z-index: 1; /* follows the z-index order of primary menu and advertise (to solve ie7 z-index BUG)*/ 
/*}*/ 

.breadcrumb{ /* breadcrumb */ 
    padding-bottom: 5px; 
    border-bottom: 1px dashed #ccc; 
    margin:0px 10px 15px 10px; 
} 

#footer{ /* site footer*/ 
    margin-top: 25px; 
    /* padding-bottom:60px; */ 
    float: left; 
/* width: 100%;*/ 
    min-width:100%; 
    max-width:100%; 
    position:relative; 
    background:#000000; 
    display: block; 
} 

#navigation-footer{ /* site footer*/ 
    position:absolute; 
    right:0px; 
    top:0px; 
    background:#000000; 
} 

#bottomUtility{ 
    position:absolute; 
    top:0px; 
    right:0px; 
} 

/* utility menu */ 

.utility ul.menu{ 
    margin:0px; 
    padding:0px; 
    list-style:square; 
} 

.utility ul.menu li{ 
    display:inline; 
    margin:0px 0px 0px 4px; 
    padding:0px; 
    list-style:square; 
} 

.utility ul.menu li a{ 
    padding-right:8px; 
    list-style:square; 
} 

.utility ul.menu li:after{ 
    content:"|"; 
    list-style:square; 
} 


/* Look & Feel 
-------------------------------------------------------------- */ 

body.marinelli{ 
    background: #17293d url(../img/backgrounds/body.gif); 
    /* background: #000; */ 
    height:125px; 
} 

#topBar,#topBarLink,#topBarLink a{ /* top toggle bar */ 
    //background:#054b81; 
    background:#101518; 
} 

#topBarLink a{ 
    font-size: 1.1em; 
} 

.outsidecontent{ 
    color:white; 
} 

#site-title, 
#site-slogan{ 
    font-weight: bold;  
} 

#site-title{ 
    font-size: 3em; 
    line-height:0.8em; 
} 

#site-slogan { 
    font-size: 2em; 
    text-indent: 0.5em; 
} 

#pageBorder{ /* border of the whole site */ 
    //border:10px solid #054b81; 
    //border:10px solid #0c0c0c; 
} 

#pageBorder.noborder{ /* when we don't have the advertise region */ 
    border-top:0px; 
} 

#contentWrapper{ 
    //background: #17293d url(../img/backgrounds/main_bg.gif); 

} 

.breadcrumb { /* breadcrumb */ 
    font-weight: bold; 
} 

.utility{ /* utility menu */ 
    font-size:0.9em; 
    //text-transform:uppercase; 
    list-style:square; 
} 

Answer 1

這裏的問題是，你有被用於佈局目的的表。表格通常僅用於顯示錶格數據，而不是佈局。表的默認行爲是收縮到其內容（即如果您的內容很小，它不會擴展頁面的整個寬度）。

如果您不能修改標記，你應該需要補充的是：

http://jsfiddle.net/Yx9JM/1/

#footer table { 
    width: 100%; 
} 

Answer 2

在過去，我發現，你需要設置頁面以100％的身體的寬度，以允許子元素（頁腳）延伸到100％。因此，請嘗試執行此操作：

body,html{ 
margin:0px; 
padding:0px; 
width: 100%; 
background: #17293d url(../img/backgrounds/main_bg.gif); 
} 

Answer 3

您需要一個'width：100％;'的shell，然後是一個居中的內部元素。

HTML

<footer> 
    <ul> 
    <li>Content</li> 
    <li>Content</li> 
    <li>Content</li> 
    <li>Content</li> 
    <li>Content</li> 
    <li>Content</li> 
    </ul> 
</footer> 

CSS

footer { 
    width:100%; 
    padding:2em 0; 
    background:#d0d0d0; 
    border-top:5px solid #000; 
} 
footer ul { 
    width:960px; 
    margin:0 auto; 
}