15

我想让我的内部 div 100% 的宽度，而不是父 div 的 100%。这可能吗？

布局如下所示：

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

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

7 回答 7

11

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

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

演示

于 2012-11-22T11:05:45.027 回答
4

您可以使用 vh 和 vw 单位

.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>
于 2015-12-15T14:10:51.557 回答
2

尝试这个：

.inner {
  margin-left: -50vw;
  left: 50%;
  position: fixed;
  height: 100vw;
  width: 100vw;
  top: 0;
}

.outer {
  width: 900px;
  /* your outer div style*/
}
<body>
  <div class="outer"> /** Width:900px; **/
    <div class="inner"> /** This 100% of BODY, not of parent div **/

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

于 2020-01-15T13:16:24.940 回答
0

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

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);
}

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

于 2012-11-22T11:14:38.020 回答
0

这成功了。一个 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;');
});
于 2012-11-22T11:57:11.677 回答
0

考虑将您的布局更改为以下内容：

http://jsfiddle.net/KpTHz/

然后，您可以将 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;
}
于 2012-11-22T11:30:44.757 回答
0

覆盖最小宽度（min-width:100%）阻止容器增长到内容的大小。

详细信息： https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset通知：“与几乎任何其他元素不同，WHATWG HTML 渲染规范建议将 min-width: min-content 作为的默认样式，许多浏览器都实现了这种样式（或类似的样式）。”

于 2018-02-21T19:48:19.050 回答