CSS Footer width

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

Вам нужна оболочка, которая является «ширина: 100%;`, а затем внутренний элемент, который по центру.

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; 
}