Как сделать ширину дива по весь экран?

Question

[Игорь]

welovepavel.esy.es/Kivi/HTML.html

width:100%;
как то не так работает

нужно чтобы фон синий растянулся на всю ширину экрана,а контент был фикс как есть сейчас.

23.09.15 15:30
jsfiddle.net/x28fLrpn
важно чтобы и контент был по центру...а не расплывался...

Спасибо!

Comments

[Игорь]

Vitaliy Orlov помогите,пожалуйста нужна Ваша помощь!

как сделать чтобы синий фон был на всю ширину экрана + контент был фиксированными работал!....
спасибо

Answer 1

[Гарольд]

<section>
    <div class="container">
      Контент
    </div>
  </section>

section {
 background-color:blue;
} /* Синий фон на всю ширину */
.container {
 margin: 0 auto;
 max-width: 980px;
}  /* Фиксированный контейнер с контентом */

Как написал Вячеслав убери max-width в body

Comments

[Игорь]

нет.

[Гарольд]

Игорь: что нет?

[Игорь]

Гарольд: stroytech.pe.hu
может мне здесь тоже max-width убрать?

ЗЫ.обрати внимание на футер...

[Гарольд]

Игорь: Зачем тебе дублировать свойства?
Устанавливай нужную ширину контейнера для контента.
Причем ты можешь делать разные варианты ширины, где это необходимо.

Например:

container {
max-width:980px;
}
footer .container {
min-width: 980px;
max-width: 1200px;
}
header .container {
min-width 980px;
max-width: 100%;
margin: 0 20px;
}

Answer 2

[Stalker_darkway]

body{
max-width: 1300px; //Убери
}

Comments

[Игорь]

нет.

Answer 3

[Григорий]

У вас position:absolute. При таком параметре div минимизируется. Единственный простой и нормальный способ, через JS или jQuery определить ширину окна и применить min-width

$('div.button').css('min-width',$(window).width());

P.S.: Вячеслав верно заметил. max-width убрать.

Comments

[Игорь]

куда именно эту строку кода вставить в скрипет?

[Григорий]

Игорь: в обработчик .resize()

$(window).resize(function(){
    $('div.button').css('min-width',$(window).width());
});

[Григорий]

Игорь: Вся проблема в том, что .button находится внутри body, который ограничен max-width:1300px;
Если бы внутри body был div ограниченный max-width:1300px;, в котором находится все содержимое , при этом .button лежал непосредственно в body, тогда этой проблемы не возникло.
body ограничивает .button, поскольку .button подчиняется body, поэтому не факт, что мой вариант поможет...

[Игорь]

Григорий: $('.button').on('click', function(){
if($(this).parents('.drop').is('.opened') !== true) {
$('.drop').addClass('opened');
$(".drop").animate({
height: 400,
}, 200);
}
else if($(this).parents('.drop').is('.opened') === true){
$('.drop').removeClass('opened');
$(".drop").animate({
height: 0,
}, 200);
}
$(window).resize(function(){
$('div.button').css('min-width',$(window).width: 1300());
});

});

так чтоли?

[Григорий]

Игорь:

$('div.button').css('min-width',$(window).width());

Я не опечатался. Именно так как я написал. $(window).width() - функция, которая возвращает текущую ширину окна браузера. Нам именно это и надо, в данной ситуации.

Answer 4

[Павел Волынцев]

.hea {
   position: absolute;
   width: 100%;
   left: 0px;
}

codepen.io/copist/pen/wKzGeq

Comments

[Игорь]

а внутри контент как поправить?
он уплыывает...