Question

我试图将div强制为全窗口宽度，尽管它的父宽度。所有我正在尝试制作div全宽但来自父div的方法＆＃39;离开了起点。这是HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

如何扩展子div的宽度而不管父元素的宽度？

Answer 1

您可以使用

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

或

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

Answer 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>

制作儿童Div全窗宽

2 个答案: