Сделайте дочерний div растяжкой по ширине страницы

Предположим, что у меня есть следующий код HTML:

<div id="container" style="width: 960px">
   <div id="help_panel" style="width: 100%; margin: 0 auto;">
     Content goes here.
   </div> 
</div>

Если я хочу, чтобы help_panel div растягивался по ширине страницы /broswer, даже если ширина страницы/браузера шире 960 пикселей (это ширина, заданная для div контейнера), можно ли это сделать это с вышеуказанной структурой? Я хочу, чтобы панель панели справки расширялась за пределы ширины, установленные в контейнере div, если страница имеет ширину более 960 пикселей.

Мне любопытно, можно ли это сделать с помощью вышеуказанной структуры. Или мне придется поместить help_panel div за пределы контейнера div, чтобы он работал?

Спасибо!

Ответ 1

Да, это можно сделать. Вы должны использовать

position:absolute;
left:0;
right:0;

Проверьте рабочий пример http://jsfiddle.net/bJbgJ/3/

Ответ 2

С текущими браузерами (теперь этот вопрос встречается немного), вы можете использовать гораздо более простой блок vw (ширина видового экрана):

#help_panel {
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

(данные использования: http://caniuse.com/#feat=viewport-units)

Из моих тестов это не должно нарушать ваш поток, будучи простым в использовании.

Ответ 3

Вы можете сделать это с помощью jQuery...

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

В противном случае, насколько css идет, я уверен, вам придется сидеть help_panel div вне container с помощью position:absolute styling: http://css-tricks.com/forums/discussion/2318/give-child-div-width%3A100-of-page-width-inside-parent./p1

Ответ 4

Да, вы можете установить position: relative для контейнера и position: absolute для help_panel

Ответ 5

Я знаю, что этот пост старый, на случай, если в 2019 году кто-нибудь наткнется на него, это сработает, попробуйте.

//html
<div id="container">
<div id="help_panel">
<div class="help_panel_extra_if_you_want"> //then if you want to add some height and width if you want, do this.

</div>
</div>
</div>

//css
#container{
left: 0px;
top: 0px;
right: 0px;
z-index: 100;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;    
position: relative;
height:650px;
margin-top:55px;
margin-bottom:-20px;
}

#help_panel {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-right: 24px;
padding-left: 18px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

.help_panel_extra_if_you_want{
height:650px;
position: relative;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
display: flex;
width: 95%;
max-width: 1200px;
}

ДОЛЖЕН ДАТЬ ВАМ, КАК ЭТО ТАКОЕ

Ответ 6

вы можете вытащить его из потока, установив на него position:absolute, но у вас будут разные проблемы с отображением. Или вы можете явно задать ширину > 960.

Ответ 7

Вы можете вывести его из потока с положением: абсолютным. Но helper_panel будет oberlap с другими вещами. (Я добавил заказы, чтобы увидеть divs)

<div id="container" style="width: 960px; border:1px solid #f00;">
    Text before<br>
   <div id="help_panel" style="width: 100%; position:absolute; margin: 0 auto; border:1px solid #0f0;">
     Content goes here.
   </div> 
   This is behind the help_penal
</div>

Ответ 8

Просто установите ширину в 100vw следующим образом:

<div id="container" style="width: 100vw">
 <div id="help_panel" style="width: 100%; margin: 0 auto;">
  Content goes here.
 </div> 
</div>

Ответ 9

Вы можете использовать 100vw (ширина видового экрана). 100vw означает 100% окна просмотра. vw поддерживается всеми основными браузерами, включая IE9 +.

<div id="container" style="width: 960px">
   <div id="help_panel" style="width: 100vw; margin: 0 auto;">
     Content goes here.
   </div> 
</div>

Ответ 10

Поскольку position: absolute; и ширина видового экрана не были параметрами в моем специальном случае, есть еще одно быстрое решение для решения проблемы. Единственным условием является то, что для вашего сайта не требуется переполнение в x-направлении.

Вы можете определить отрицательные поля для вашего элемента:

#help_panel {
    margin-left: -9999px;
    margin-right: -9999px;
}

Но поскольку мы переполняем это, мы должны избегать переполнения в x-направлении глобально, например. для тела:

body {
    overflow-x: hidden;
}

Вы можете установить padding для выбора размера вашего контента.

Примечание, что это решение не приносит 100% ширины для содержимого, но оно полезно в тех случаях, когда вам нужно, например, цвет фона, который имеет полную ширину с содержимым, все еще зависящим от контейнера.

Ответ 11

............... В формате HTML

<div id="a">Full Width</div>

............... В формате CSS

#a { background-color: green;width: 100%;height: 80px;border: 1px solid;margin: 0 auto;} 

    body { padding: 0;margin: 0}

Ответ 12

Вы можете сделать:

margin-left: -50%;
margin-right: -50%;