Сделать div внутри родителя 100% ширины тела, а не родительского div

Я хочу сделать свою внутреннюю div 100% ширину тела, а не 100% родительского div. Возможно ли это?

Макет выглядит следующим образом:

<body>
   <div> /** Width:900px; **/
      <div> /** This I want 100% of BODY, not of parent div **/

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

Ответ 1

Надеюсь, вы так смотрите... см. DEMO

ОБНОВЛЕНО ДЕМО 2 КАК НА ВАШЕ ТЕКУЩИЕ ТРЕБОВАНИЯ

CSS

    .parent {
background:red;
width:900px;
margin:0 auto;
padding:10px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.inner {
background:green;
height:100px;
position:absolute;
  left:0;
  right:0;
}

.child {
  height:100px;
  background:black;
  margin:10px 0;
}

------------- **

Второй ответ без позиционирования, но с некоторым трюком, что я использовал здесь, пожалуйста, проверьте его код и демо, указанные ниже: -

HTML

<body>
   <div class="parent"> /** Width:900px; **/
  <div class="child"></div>
  </div>
  <div class="inner"> /** This I want 100% of BODY, not of parent div  **/</div>
   <div class="parent">
       <div class="child"></div>
       <div class="child"></div>
   </div>
</body>

CSS

.parent {
background:red;
width:900px;
margin:0 auto;
padding:10px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.inner {
background:green;
height:100px;
}

.child {
  height:100px;
  background:black;
  margin:10px 0;
}

DEMO

Ответ 2

вы можете использовать vh vw units

.parent {
  width: 900px;
  height: 400px;
  background-color: red;
}
.child {
  width: 100vw;
  height: 200px;
  background-color: blue;
}

<html>
  <body>
   <div class="parent"> 
      <div class="child"> 

      </div>
   </div>
</body>
</html>

Ответ 3

Я думаю, что то, о чем вы просите, невозможно. Вместо этого вы должны подумать о переосмыслении вашего макета. Я часто нахожу, что делаю такие вещи:

HTML:

<div id="top">
    <div class="wrapper"></div>
</div>
<div id="content">
    <div class="wrapper"></div>
</div>
<div id="footer">
    <div class="wrapper"></div>
</div>

CSS

#top {
  background: red;
}

#content {
  background: orange;
}

#footer {
  background: yellow;
}

.wrapper {
  width: 860px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.2);
}

demo - http://jsfiddle.net/bxGH2/

Ответ 4

Подумайте о том, как изменить свою layoiut на что-то вроде следующего:

http://jsfiddle.net/KpTHz/

Затем вы можете просто применить теги идентификаторов к DIV, к которым вы хотите применить определенные правила.

<div class="outer">
 <div class="inner">HEADER</div>
</div>

<div class="outer">
 <div class="inner">CONTENT</div>
</div>

<div class="outer">
 <div class="inner">FOOTER</div>
</div>


.outer {
 width:100%;
 background:#ccc;
}

.inner {
 width:920px;
 background:#999;
 margin:0 auto 20px;
 padding:20px;
}

Ответ 5

Это сделало трюк. JQuery script:

$(document).ready(function () {
  var width = $(window).width();
  $('.pane-block-8').attr('style', 'width:' + width + 'px; left:-26.5% !important;');
});

$(window).resize(function () {
  var width = $(window).width();
  $('.pane-block-8').attr('style', 'width:' + width + 'px; left:-26.5% !important;');
});

Ответ 6

Переопределение min-width (min-width: 100%) остановило контейнер от роста до размера содержимого.

Детали: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset сообщает: "В отличие от любого другого элемента, спецификация WHATWG HTML Rendering min-width: min-content как часть стиля по умолчанию, и многие браузеры реализуют такой стиль (или что-то, что его приближает).