Развернуть ширину до 100%

Question

У меня есть контейнер с фиксированной шириной. У меня есть нижний колонтитул, который застрял в обертке с фиксированной шириной. Я хочу расширить ширину нижнего колонтитула 100%.

Я не могу изменить html-код. Мне нужно руководство, как я могу сделать нижний колонтитул 100% сохранением его в фиксированной обертке.

Я попытался заставить его работать в относительном/абсолютном положении.

Это мой код.

<style> 
    .wrapper{ width:980px; margin:0 auto} 
    .body{background:red} 
    .footer{ width:100%; background:green} 
</style> 

<div class="wrapper"> 
    <div class="body">Main body contain</div> 
    <div class="footer">Footer</div> 
</div> 

Answer 1

Вы можете сделать это с помощью абсолютного позиционирования .footer. Измените то, что у вас есть, на следующее.

.footer { 
    background:green; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

Если добавить position: relative; в .wrapper это не будет работать, и ваша сноска будет содержаться в .wrapper.

jsFiddle: http://jsfiddle.net/8qkes6ba/

Answer 2

Попробуйте width: 100vw;, что означает 100 ширины окна просмотра. и не относится к контейнеру, например процентам. Вам все равно нужно поместить его влево.

Answer 3

Попробуйте добавить это:

.wrapper{ width:980px; margin:0 auto} 
.body{background:red} 
.footer{ position:absolute; left:0; width:100%; background:green} 

jsFiddle

Answer 4

Вопрос заключается в том, что wrapper класс установлен, чтобы иметь ширину 980px, которая вызывает ширину footer класса когда установлено значение 100%, должно быть не более 980px.

<style> 
    .wrapper{ width:980px; margin:0 auto} 
    .body{background:red} 
    .footer{ width:100%; background:green} 
</style> 

<div class="wrapper"> 
    <div class="body">Main body contain</div> 
</div> 

<div class="footer">Footer</div> 

Answer 5

позиция абсолютного будет работать для вас

.footer { 
    position: absolute; 
     background:green;  
     left: 0; 
     right: 0; 
    }