JQUERY: измените размер div до ширины окна

#jquery

Вопрос:

Я пытаюсь принудительно привести ширину div к ширине окна браузера. Так что, даже если окно изменяет размер, оно регулирует его ширину.

Я исследовал около часа и нашел странные фрагменты, такие как .resize(), но не могу найти ничего, что работает.

Ответ №1:

Без контейнера, ограничивающего ширину, div по умолчанию должен занимать ширину окна браузера. Вы можете явно установить ширину на 100%, но в этом не должно быть необходимости:

 <div style="width:100%;">Hello world</div>

Я думаю, что CSS здесь более уместен, но вы можете сделать это в jQuery следующим образом:

 $("#div1").width($(window).width());

Чтобы запускать приведенный выше код всякий раз, когда изменяется размер окна, вы можете сделать это:

 $(window).resize(function(){
    $("#div1").width($(window).width());
});

Вот jsFiddle. Для наглядности div расширяется при нажатии кнопки.

1. Это работает хорошо, спасибо. Но есть ли какой-либо способ изменить ширину при изменении размера браузера без обновления?

2. Только что добавлен еще один пример, который должен этого достичь.

3. Блестяще! Спасибо. Я пытался использовать функцию .resize, но не смог сделать это правильно.

Ответ №2:

Попробуйте это:

 <div id="full"></div>

<script type="text/javascript">
    function reSize($target){
        $target.css('width', $(window).width() 'px');
    }
    $(document).ready(function(){
        $(window).bind('resize', reSize($('#full')));
        $(window).trigger('resize');
    });
</script>

Я надеюсь, это поможет!

1. Код в моем ответе не устанавливает его на 100%; он устанавливает его на ширину окна. попробуйте,

2. Похоже, это не работает. Я добавляю JS во внешний JS-файл.

3. Можете ли вы включить код, содержащий div, с которым вы работаете, и я могу адаптировать ответ к размеру.

4. <ul id="navigation"> <ul> <li> <a href="http://hawkesbeaumont.blueplanetdns.com/section.php/11/1/leather-goods">Leather Goods</a> <div class="sub-navigation" style="display: none;"> </div> </li> <li> </li> <li> </li> </ul> </ul>

5. @Guy Не имеет значения, насколько широк DIV, если он не отображается.

Ответ №3:

 width: 100%;
display: block;

Необязательно:

 position: absolute;

1. Div содержится в родительском div, который имеет фиксированную ширину, поэтому установка 100% ширины приведет только к корректировке его ширины родительского div.

2. @Guy Будет полезно, если вы упомянете важные детали, подобные этому, в исходном вопросе.

Ответ №4:

Я думаю, вы можете решить это, используя css width 100%

  div#full{ width:100%}

🙂