使div在父级内100%宽度的身体,而不是父级div [英] Make div inside parent 100% width of body, not parent div

查看:116
本文介绍了使div在父级内100%宽度的身体,而不是父级div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

布局如下所示:

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

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


推荐答案

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

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

根据您的当前要求更新演示

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

这篇关于使div在父级内100%宽度的身体,而不是父级div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆