html - 如何实现各方固定大小的动态宽度 div

Question

如何创建一个从两边固定的 div(响应式)。像这样:

                               Screen (big)
+----------------------------------------------------------------+
|                                                                |
|....20px.....______________________________________....20px.....|
|            |                                      |            |
|            |                 div                  |            |
|            |______________________________________|            |
|                                                                |
|                                                                |
+----------------------------------------------------------------+




                Screen (small)
+--------------------------------------------+
|                                            |
|....20px.....__________________....20px.....|
|            |                  |            |
|            |       div        |            |
|            |__________________|            |
|                                            |
|                                            |
+--------------------------------------------+

需要注意的是，我的注意力集中在left和right这边。

现在可以实现了吗？

Answer 1

非常简单。

JSFiddle

.wrap {
  padding: 20px;
  background: orange;
}
.child {
  height: 100px;
  background: #663399;
}

<div class="wrap">
  <div class="child"></div>
</div>