css - 具有前沿的响应式设计布局

Question

如下图所示，文档的 html/css 结构的最佳方法是什么：

中心区域是实际的浏览器窗口。我需要容器 div（连同它的内容）延伸到浏览器窗口之外（因为我需要通过 transform: scale(0.xx); 在某些时候达到一定的效果，我不希望页边空白）。

容器 div 将具有背景的完整覆盖图像，并且整个事物都需要根据响应式设计，无论浏览器窗口如何调整大小都保持这种结构。

有什么提示或建议吗？

Answer 1

根据您提供的内容，我建议您设置负边距以实现您的目标。像这样：

<div id="container">
     <div id="left"></div>
     <div id="right"></div>
</div>

CSS：

#left{
     margin-left: -5%;
     margin-bottom: -5%;
}
#right {
     margin-right: -5%;
     margin-bottom: -5%;
}

然后有基于百分比的宽度和高度..希望这会有所帮助