Question

在减小或增大窗口宽度时是否可以拉伸它并使之起作用？除了更改div.wide或内部其他内容外，无需进行其他任何更改。

可以通过CSS数学方式完成，还是仅使用JS？

.wide {
  background:green;
  height:200px;
  /**/
  margin-left:-20%;
  margin-right:-20%;
}

Answer 1

当然！

认识新的友好CSS单位vw and vh！

至少，您的代码将这样更改：

.wide {
  background:green;
  height:200px;
  // use calc to sort out the left margin to break out of the inner container
  margin-left:calc((100vw - 800px) / -2);
  // set width to full viewport width
  width: 100vw;
}

这是您的CodePen，已修改以显示结果：https://codepen.io/anon/pen/KreNGK

一些注意事项：

如果在padding元素上有border或.wide，则可能需要设置box-size: border-box;，以使宽度仍然正确。（more on box-size）
对于视口小于小于800px inner元素的情况，您可能需要设置一些媒体查询。
上面的calc可以简化为calc(-50vw + 400px);，但是我使用的结构基于使用变量（例如使用SCSS或LESS）的思想，因此最终可能是{{ 1}}并仍然可以正常工作...

在最大宽度div内拉伸div以响应性地查看全角吗？

1 个答案: