在父级100％宽度内设div，而不是父div

时间：2022-07-10 20:21:54

I want to make my inner div 100% width of the body, not 100% of the parent div. Is this possible?

我想让我的内部div 100%宽度的身体,而不是父div的100%。这可能吗?

The layout looks like this:

布局看起来像这样:

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

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

6 个解决方案

#1

11  

i hope you are looking like this........... see the DEMO

我希望你看起来像这样...........看看演示

UPDATED DEMO 2 AS PER YOUR CURRENT REQUIREMENTS

根据您当前的要求更新演示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;
}

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

Second Answer with without positioning but with a some trick what i used here so please check it the code & demo mentioned below :-

第二个答案没有定位,但有一些技巧,我在这里使用所以请检查下面提到的代码和演示: -

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

2  

you can use vh an vw units

你可以使用vh和大众单位

.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

0  

Consider changing your layoiut to something like the following:

考虑将您的layoiut更改为以下内容:

http://jsfiddle.net/KpTHz/

Then you can just apply ID tags to DIVs you want to apply specific rules to.

然后,您只需将ID标签应用于要应用特定规则的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;
}

#4

0  

I think what you are asking for isn't possible. Instead you should consider rethinking your layout. I often find myself doing stuff like this:

我认为你所要求的是不可能的。相反,你应该考虑重新思考你的布局。我经常发现自己在做这样的事情:

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/

演示 - http://jsfiddle.net/bxGH2/

#5

0  

This made the trick. A jQuery script:

这就成了伎俩。一个jQuery脚本:

$(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

0  

Overriding the min-width ( min-width:100% ) stopped the container from growing to the size of the contents.

覆盖最小宽度(最小宽度:100%)使容器停止生长到内容的大小。

Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset informs: "Unlike almost any other element, the WHATWG HTML Rendering spec suggests min-width: min-content as part of the default style for , and many browsers implement such styling (or something that approximates it)."

详细信息:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset通知:“与几乎任何其他元素不同,WHATWG HTML渲染规范建议min-width:min-content作为默认样式,以及许多浏览器实现这样的样式(或近似它的东西)。“

#1

11  

i hope you are looking like this........... see the DEMO

我希望你看起来像这样...........看看演示

UPDATED DEMO 2 AS PER YOUR CURRENT REQUIREMENTS

根据您当前的要求更新演示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;
}

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

Second Answer with without positioning but with a some trick what i used here so please check it the code & demo mentioned below :-

第二个答案没有定位,但有一些技巧,我在这里使用所以请检查下面提到的代码和演示: -

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

2  

you can use vh an vw units

你可以使用vh和大众单位

.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

0  

Consider changing your layoiut to something like the following:

考虑将您的layoiut更改为以下内容:

http://jsfiddle.net/KpTHz/

Then you can just apply ID tags to DIVs you want to apply specific rules to.

然后,您只需将ID标签应用于要应用特定规则的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;
}

#4

0  

I think what you are asking for isn't possible. Instead you should consider rethinking your layout. I often find myself doing stuff like this:

我认为你所要求的是不可能的。相反,你应该考虑重新思考你的布局。我经常发现自己在做这样的事情:

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/

演示 - http://jsfiddle.net/bxGH2/

#5

0  

This made the trick. A jQuery script:

这就成了伎俩。一个jQuery脚本:

$(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

0  

Overriding the min-width ( min-width:100% ) stopped the container from growing to the size of the contents.

覆盖最小宽度(最小宽度:100%)使容器停止生长到内容的大小。

Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset informs: "Unlike almost any other element, the WHATWG HTML Rendering spec suggests min-width: min-content as part of the default style for , and many browsers implement such styling (or something that approximates it)."

详细信息:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset通知:“与几乎任何其他元素不同,WHATWG HTML渲染规范建议min-width:min-content作为默认样式,以及许多浏览器实现这样的样式(或近似它的东西)。“

标签：

相关文章