使子 Div 全窗口宽度答案

【问题标题】：Make A Child Div Full Window Width使子 Div 全窗口宽度
【发布时间】：2016-12-14 15:44:33
【问题描述】：

我试图强制一个 div 为全窗口宽度，尽管它是父级宽度。我正在尝试使 div 全宽但从父 div 的左起点开始的所有方法。这是 HTML：

jQuery( document ).ready(function($) {
  var winWidth = $(window).width();

  $('.expand').css({
    'width': winWidth,
  });

  $(window).resize(function(){
    $('expand').css({
      'width': winWidth,
    });
  });
});

body {
  background:#fff;
}
.page {
  width:70%;
  margin:100px auto;
  background:#eee;
  border:1px solid #ddd;
  padding:10px;
}
.expand {
  padding:50px;
  text-align:center;
  background:green;
  color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
  <div class="page">
    <div class="content">
      <div class="expand">
        Content...
      </div>
    </div>
  </div>
</body>

无论父元素的宽度如何，如何扩展子div的宽度？

【问题讨论】：

为什么不使用.expand { width: 100vw }？
看来您需要fixed 职位？
您的实施有什么问题？似乎工作正常..

标签： jquery html css

【解决方案1】：

你可以使用

.expand {
    position:absolute;
    left:0;
    right:0;
}

或

.expand {
    position:fixed;
    left:0;
    right:0;
}

【讨论】：

【解决方案2】：

你可以使用绝对位置：

body{
  background:#fff;
  position:relative;
 }
.page{
  width:70%;
  margin:100px auto;
  background:#eee;
  border:1px solid #ddd;
  padding:10px;
}
.expand{
  position:absolute;
  left:0;
  right:0;
  padding:50px;
  text-align:center;
  background:green;
  color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
	<div class="page">
		<div class="content">
			<div class="expand">
				Content...
			</div>
		</div>
	</div>
</body>

【讨论】：